Talk communication Vue (2.0) component

Vue (2.0) is a component-based development model, without the aid of vuex framework of how communication between the components of it? Next, I summarize several cases in development.
1. The parent component subassembly to pass value (props):

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

Sub-component parts

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

Parent component parts:

<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. parent component subassembly to pass the value ($ EMIT) subassembly to the central idea of the parent components are passed by value; mass participation by the process, are used as follows:

Sub-component parts

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

HTML part of the parent page: calling custom method of tanslateText by tanslate events defined sub-pages

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

Js part of the parent page:

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

3. The value transfer between components brothers

Vuex without the aid of words, communication between the brothers and components nothing to do, but we can use existing knowledge to achieve brothers components of communication, the central idea is the "first child pass the Father, father to son in" method, the specific code as above same, well! The above is without the aid of communication between the components vuex

Guess you like