说一说Vue(2.0)组件的通信方式

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

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

子组件部分

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

父组件部分:

<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) 子组件给父组件传值的中心思想是;通过方法传参,具体用法如下:

子组件部分

   <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组件之间的通信方式

    原文作者:马明瑞
    原文地址: https://segmentfault.com/a/1190000014280544
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞