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:详情见官网

Logo

前往低代码交流专区

更多推荐