说一说Vue(2.0)组件的通讯体式格局

2024年4月25日 204次阅读 来源: 马明瑞

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