vue组件传值的八种方式
1. 父传子首先在使用子组件的标签上 通过自定义属性传递变量 在子组件中 通过 props 接受在接收的时候有两种接收方式 数组形式 和 对象形式 对象形式可以规定传来的变量的数据类型(type)默认值(default)以及是否必填(required)2. 子传父首先在使用子组件的标签上定义一个自定义事件 在子组件里通过 this.$emit 去调用这个自定义事件 $emit 方法的第一个参数是自
·
1. 父传子
首先在使用子组件的标签上 通过自定义属性传递变量 在子组件中 通过 props 接受
在接收的时候有两种接收方式 数组形式 和 对象形式 对象形式可以规定传来的变量的数据类型(type)默认值(default)以及是否必填(required)
2. 子传父
首先在使用子组件的标签上定义一个自定义事件 在子组件里通过 this.$emit 去调用这个 自定义事件 $emit 方法的第一个参数是自定义事件的名字 第二个参数是就是子组件要传递给父组件的变量 最后在父组件接收使用就可以了
3. 兄弟组件
利用中央事件总线 eventbus
在 main.js 中 把一个空的 vue 实例挂载在 vue 的原型上起名叫$bus
传数据的时候用this.$bus.$emit传
在要接受数据的子组件 在 created钩子函数中 用$on 方法接收
4. 利用 vuex 进行组件通信
把公共的数据存在 vuex 里就可以实现组件之间都能使用这个数据了
5. 其实 v-model 也能实现组件通信
因为 v-model 就是 :value 和 @input 事件的合写 如果在一个子组件上使用 v-model 也能实现父子组件之间的通信
6. a t t r + attr+ attr+listener
如果父组件 A 下面有子组件 B 子组件 B 下面又有子组件 C 如果 a 组件的变量和方法想要传给组件 C 的时候 就用到这个方法 适用于多级组件传值在 B 组件中给 C 组件绑定 v-bind="$attrs" v-on="$listeners" 然后在 C 组件中就可以直接使用 a 传来的属性和方法了简单来说:$attrs与$listeners 是两个对象,$attrs 里存放的是父组件中绑定的非 Props 属性,$listeners 里存放的是父组件中绑定的非原生事件。)
更多推荐
已为社区贡献1条内容
所有评论(0)