脚本宝典收集整理的这篇文章主要介绍了vue组件之间通信 (ref v-model 与.sync修饰符) 之三,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
组件之间的传值一般涉及到父子之间(属性绑定prop接收父传值/事件绑定$emit子触发父事件),兄弟之间(事件总线)以及无直接关系的组件之间(vuex)
利用refs实现父子之间的传值通信方式,权重较高
v-model与.sync的双向数据绑定
子组件标签上里 ref="xxx"
子组件的this(实例对象)====this.$refs.xxx
<!-- 父组件的template中
用ref 实现父子传值
this.$refs 传值给子组件 得到子组件的实例对象,直接调用子组件的属性和方法
直接在父组件修改子组件的值
Add为组件标签
-->
<Add ref="add"/>
// 父组件的js代码 methods中定义 某时机下修改
addClick() {
// refs 传值给子组件 得到子组件的实例对象,直接调用子组件的属性和方法
this.$refs.add.isShow = true
this.$refs.add.mode = 'add'
},
//子组件中
data() {
return {
...其他数据
mode: 'add',
isShow: false,
}
},
子组件标签如果是其它组件包着的就是其它组件是它的父级
如果子组件标签是原生标签包着的,它的父组件就是它所在的组件
submit() {
// 刷新父级列表 触发父级的方法
// 原始方式 方法绑定 :this.$emit('getData')
//触发父组件中的getData()方法
this.$parent.getData() //注意最近一级的父级 (不可在组件内)
})
2.1子组件标签上书写
- value="父组件属性" @input="父组件属性=$event"
- v-model="父组件属性"
子组件内: props:['value'], //接收父传递的值 model:{ prop:'传入的属性名,默认是value,当传递的属性不是value时,需要以此改值', event:'绑定的事件名,默认是input,当传递的事件名不是input时,需要以此改值' }, props单向数据流:栈不可修改,堆可以修改 基本数据类型不可修改,复杂数据类型,只要不改变它的引用地址(栈),它的值随便修改 this.$emit('input',实参值) //触发父组件的方法改值
子组件标签
子组件内 props:['属性名'] 触发:this.$emit('update:属性名',实参值)
以上是脚本宝典为你收集整理的vue组件之间通信 (ref v-model 与.sync修饰符) 之三全部内容,希望文章能够帮你解决vue组件之间通信 (ref v-model 与.sync修饰符) 之三所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。