vue2组件之间传值(数据共享)
1.父组件向子组件传值:①在父组件中使用v-bind进行属性绑定②在子组件中使用props进行数据接收2.子组件向父组件传值:①在子组件中使用v-on进行事件绑定,使用$emit发送数据②在父组件中自定义事件用于接收传过来的值,使用$on接收数据3.兄弟组件之间传值:EventBus......
·
1.父组件向子组件传值:
①在父组件中使用v-bind进行属性绑定
②在子组件中使用props进行数据接收
2.子组件向父组件传值:
①在子组件中使用v-on进行事件绑定,使用$emit发送数据
②在父组件中自定义事件用于接收传过来的值,使用$on接收数据
3.兄弟组件之间传值:EventBus
①首先在父组件进行组件挂载:
②新建一个公共的js文件,内部添加如下代码:
③在需要传值的子组件中进行公共JS文件的引入:
import myBus from '@/components/utils/myBus.js'
④在传值的子组件中使用$emit进行传值:
⑤在接收值的组件中使用$on进行接收(写在钩子函数中!!!):
4.$attrs和$listeners:
如果A组件包含B组件,B组件调用C组件,A组件想要传值给C组件,可以用这个方法。
如果C组件想要改变数据,回传给A:直接在C组件中使用$emit,在A组件使用v-on监听事件即可
5.provide和inject:
父组件中通过provide来提供变量,然后在子组件中通过inject来注入变量。
6.v-model:
7. $parent和$children:
子组件通过$parent对父组件进行操作,父组件通过$children对子组件进行操作。
8. Vuex:详情见官网。
更多推荐
已为社区贡献6条内容
所有评论(0)