vue组件传参方式

组件内的六种通信方式

父传子 props

在父组件中定义一个数据 msg:‘hello 李湘’

在模板中绑定这个属性 < Child :msg=‘msg’ >

在子组件使用props:[‘msg’] 接收数据

在模板中使用msg数据

代码展示:
父组件:

子组件:

子传父 $emit

在父组件方法中定义一个点击 自定义事件,
在子组件通过 $ emit接收这个自定义事件名,第二个参数是你想要传入修改的数据

代码示例:

父组件:

子组件:

$on/ $emit

先设置一个 空实例,作为公共组件
在a组件通过 $on(‘事件名’,想传的的数据),
在b组件通过 $emit()接收

回调函数(callback)

在父组件方法中定义一个changeMsg,它可以修改data中的msg

这时changeMsg可以作为另外一个props传递给Child(子组件),此时Child(子组件)就接收了msg和changeMsgFn

在子组件使用props接收msg和changeMsgFn

此时点击按钮的时候就可以执行changeMsgFn

代码示例:
父组件:

子组件:

$parent

在父组件定义一个msg数据

在子组件就可以通过$parent.msg访问到值

代码示例:

父组件:

子组件:

$children

在组件先定义一个数据 number:10

在父组件通过$children第0项(因为一个父组件可能会有很多个子组件,此目的为找到第一个子组件),然后把它的number修改成50

在父组件模板中点击按钮时触发自定义事件

从而修改子组件中number的值

代码示例:
父组件:

子组件:

provide + inject

有俩种方式
对象形式:

在父组件使用provide
在子组件使用inject接收数据

代码示例:
父组件:

子组件:

函数形式:
provide(){
return{
msg:this.msg
}
}

$ attrs

包含了父作用域中不作为 props接受的属性
在子组件通过v-bind = '$attrs’

在父组件里使用子组件,在子组件中使用孙组件 (三层嵌套)
在父组件中定义两个数据 name:‘李湘’,age:18
传递给子组件
在子组件中不去使用它,而是传递给孙组件
在子组件中 <grandChild v-bind=’$attrs’
通过v-bind绑定事件绑定 $attrs属性
这个 $attrs就包含了父组件的name和age
因此孙组件姐可以获取到父组件的name和age

代码示例:
父组件:

子组件:

孙组件:

$listenenrs

在父组件定义一个事件监听器,在子组件中通过$listeners点击这个事件监听器,就可以触发父组件中的事件监听函数
代码示例:
父组件:

子组件:

孙组件:

ref

ref可以把子组件注册起来
在父组件使用子组件child 这里面有一个ref属性
在方法中触发 this.$refs.childComp.age获取到这个实例
设置一个点击事件从而可以获取到子组件中的数据age,子组件中也可以定义一个改变事件,修改age的值

代码示例:

父组件:

子组件: