app建站平台/seo超级外链

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>

如果没理解 看这个文章  不多解释了