說一說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元件之間的通訊方式