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

2024年2月13日 80次阅读 来源: 马明瑞

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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞