vue中的子传父和父传子
vue中的子传父、父传子详细步骤
·
子传父(this.$emit)
1、子组件某一个元素绑定常规事件
2、子组件事件函数中写上this.$emit("自定义的事件名称",传递的值)
3、父组件通过v-on指令绑定自定义事件
4、父组件的methods中声明自定义函数,通过参数e获取子组件传递的数值
父传子
方法一:利用ref传值
ref的作用:1、用在原生标签上,获取当前元素,进行DOM操作
ref在DOM元素上的作用相当于给DOM节点起了一个名字,此时利用this.$refs.xxx,就可以拿到该元素并进行相应的操作
2、用在组件上,获取当前组件,进行组件之间的传值
ref作用在组件上相当于给组件起了一个名字,通过this.$refs.xxxx可以拿到子组件的数据,或者调用子组件的方法。
1、在子组件中添加ref属性
2、子组件在methods中定义获取参数的方法
3、父组件调用子组件中的方法
方法二:利用props传值
利用props传值可以将动态(静态)的数据传递给子组件,传递是单向的。当父组件中的值发生改变时,子组件的值也会发生改变。
1、把需要传递的子组件的值当作子组件的属性
2、在child中设置props属性接收父组件传递的值(type是传递值的类型)
利用插值表达式可以直接调用传递的参数{{sendChild2}}
更多推荐
已为社区贡献1条内容
所有评论(0)