vue 中 兄弟组件如何传值呢
可能大家都回答的是eventBus 其实就是 利用一个js文件再new 出一个vue对象 然后进行 emit 和on 的触发与监听
但其实 我们有更简单的方法
第一种
a组件 点击按钮 利用 emit 触发 名叫 cl2c2的监听 传输的值为 ‘哈哈哈哈’
b组件 mounted阶段 组件b利用 $on 监听 cl2c2 方法 接收 值
第二种
我们可以自己声明一个新的vue对象 绑定在vue上 然后去 emit 和on 这个属性
先在main的js里 install 一个 变量 绑定在vue原型链上 名字我们就叫 $gqbus 然后 是一个新的vue实例
然后页面我们可以把上面第一种的$root 换成 $gqbus 进行 emit和on的输出
那么vue 父子组件如何传值呢
第一种 prop 及 emit
这里 prop 及 子组件 emit 就暂时不说了 很简单 我们直接说一些有意思的方式
第二种 v-model
v-model 是一个语法糖 一般我们都放在input 组件上 完成一个双向绑定 本身vue是单项数据流 那是如何利用v-model 变成的双向绑定呢
其实 当你写v-model的时候 就是默认 给你这个标签 添加了 一个value属性 一个 @input 方法 只不过被v-model当作语法糖了
那么我们就可以在子组件默认props接取value属性 然后 操作变量后 $emit去触发默认的input 方法 从而以巧取胜
这2行代码 其实是一个意思 那么 我们可以利用这些默认的设定 去完成一个 子父组件的 传值
那么 我们看代码
父组件
我是父组件 默认值是 {{gqName}}
<modelExample v-model="gqName"></modelExample>
data(){
return {
gqName:123
}
},
子组件
<template>
<div>
我是model练习的子组件 父组件传过来的值是:{{value}}
<button @click="jia">点击我在子组件里给父组件的值加1</button>
</div>
</template>
<script>
export default {
name: "model-example",
data(){
return {
}
},
props:['value'],
methods:{
jia(){
this.$emit('input', ++this.value)
}
}
}
</script>
结果就是我们在点击的时候 就会完成 子父组件值的双向绑定 是不是更加灵活了
高阶的 v-model
后来 vue 直接 出了 一个 model属性 方便我们去扩展 子父组件的传值方式
那么我们看代码
父组件
我是父组件2 默认值是 {{gqName2}}
<modelExample2 v-model="gqName2"></modelExample2>
data(){
return {
gqName2:321
}
},
子组件
<template>
<div>
我是model练习的子组件 父组件传过来的值是:{{zidingyiName}}
<button @click="jia">点击我在子组件里给父组件的值加1</button>
</div>
</template>
<script>
export default {
name: "model-example2",
data(){
return {
}
},
model:{
prop:'zidingyiName',
event:'zidingyiEvent'
},
props:[
'zidingyiName'
],
methods:{
jia(){
this.$emit('zidingyiEvent', ++this.zidingyiName)
}
}
}
</script>这里和上面不同的是 我们声明了model后 我们props里就可以把父组件传过来的值 自定义了
然后 model里 prop就是 我们 接过来自定义的名字 然后 event 是 我们自定义的 通过这个方法 去给父组件传值
这样就达到了全方位的自定义
第三种 .sync
https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6
上面是vue官方文档
直接上代码
父组件
我是父组件3 默认值是 {{gqName3}}
<modelExample3 :chuan.sync="gqName3"></modelExample3>
data(){
return {
gqName3:567
}
},
子组件
<template>
<div>
我是model练习的子组件 父组件传过来的值是:{{chuan}}
<button @click="jia">点击我在子组件里给父组件的值加1</button>
</div>
</template>
<script>
export default {
name: "model-example3",
data(){
return {
}
},
props:[
'chuan'
],
methods:{
jia(){
this.$emit('update:chuan', ++this.chuan)
}
}
}
</script>
如果没理解 看这个文章 不多解释了
