脚本宝典收集整理的这篇文章主要介绍了说一说Vue(2.0)组件的通信方式，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

Vue(2.0)是组件化的开发模式，在不借助vuex框架的前提下，组件之间如何通信呢？接下来我在开发中总结了几种情况。
1.父组件给子组件传值（props）：

父组件给子组件传值的方式主要是用函数props，具体操作如下

子组件部分

export default { name="child", props:['message'], //利用props函数，定义一个“message”变量 data(){ } } " title="" data-original-title="复制">

  <template>
  
       <div>{{ message }}<div/> 
       
 </template> 
 
 <script>
     export default {
        name="child",
                 props:['message'],   //利用props函数，定义一个“message”变量
         data(){
             
         }
     }
<script/>

父组件部分：

export default { name="parent", components:{ 'v-child':Child } data(){ return{ msg:'hello world' } } } " title="" data-original-title="复制">

<template>
    <v-child message="msg"><v-child/>  <!--在这里传值-->
</template>
<script>
    import Child form './child.vue'  
    export default {
        name="parent",
        components:{
            'v-child':Child
        }
        data(){
            return{
                msg:'hello world'
            }
        }
    }
<script/>

2.子组件给父组件传值（$emit） 子组件给父组件传值的中心思想是；通过方法传参，具体用法如下：

子组件部分

this.$emit("tanslate",this.msg) /*自定一个事件名tanslate和一个参数this.msg */ } } " title="" data-original-title="复制">

   <script>
        data(){
            return{
                msg:'123'
            }
        },
        methods:{
          funcName:function(){
            this.$emit("tanslate",this.msg)  /*自定一个事件名tanslate和一个参数this.msg */
          }
        }
    <script/>

父页面HTML部分：通过子页面定义的tanslate事件调用自定的tanslateText方法

<v-child v-on:tanslate="tanslateText"></v-child>

父页面js部分：

  methods:{
      tanslateText:function(item){  //参数text是子页面传过来的参数
        console.log(item)   //打印出子页面传过来的参数
      }
    }

3.兄弟组件之间传值

不借助vuex的话，兄弟组件之间通信时没什么办法的，但是我们可以利用现有的知识来实现兄弟组件通信，中心思想是“先子传父，在父传子”，具体代码与上面的方法相同，好了！以上就是不借助vuex组件之间的通信方式

脚本宝典总结

以上是脚本宝典为你收集整理的说一说Vue(2.0)组件的通信方式全部内容，希望文章能够帮你解决说一说Vue(2.0)组件的通信方式所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。