VUE ----父子組件通信

【1】 將父組件parent_component的值傳給子組件child_component 

父傳子： props， 在子組件中定義需要傳的數據，父組件在引用子組件的時候，將對應的數據傳給子組件，

    movieslist: [

        {id: 1, name: '暴力街區1'},

        {id: 2, name: '暴力街區2'},

        {id: 3, name: '暴力街區3'}

      ],    

      message: '電影',

      num: 1

<!-- 父組件 -->
<template>
  <div>
  <!-- 這裏的movieslist1，message  num 是字組件裏面定義-->
  <!-- 這裏的@click_to_parent事件是子組件裏面向父組件發射的事件，並監聽父組件的btnClick事件-->
    <child ref="child_ref" :movieslist1="movieslist" :message="message" :num="num" 
            @click_to_parent="btnClick" 
            @numinput="numinput"/>
    <p>parnet:{{num}}</p>
  </div>
</template>

<script>
import child from './child_component.vue'
export default {
  name: 'login',
  components:{
    child
  },
  data () {
    return {
      movieslist: [
        {id: 1, name: '暴力街區1'},
        {id: 2, name: '暴力街區2'},
        {id: 3, name: '暴力街區3'}
      ],    
      message: '電影',
      num: 1
    }
  },
  methods: {
    btnClick(item) {
      console.log('父組件監聽到了子組件的點擊事件', item);
    },
    numinput(value) {
      console.log(value);
      this.num = parseInt(value);
    }
  },
  mounted: function() {
    this.$nextTick(function() {
      // 引用子組件
      console.log(this.$refs.child_ref);
    });
  }  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

<!-- 子組件 -->
<template>
  <div>
    <h1>{{message}}:</h1>
    <li v-for="(item, index) in movieslist1" :key="index" @click="liClick(item)">{{item.name}}</li>
    <!-- 這樣寫可以監聽input框 -->
    <input type="text" :value="dnum" @input="inputchange"/>
    <p>{{dnum}}</p>
    <div ref="ref_child">武漢加油</div>
  </div>
</template>

<script>
export default {
  name: 'login',
  props: {
    movieslist1: {
      type: Array,
      default() {
        return []
      }
    },
    message: {
      type: String,
      default: '如果沒有傳值，那就顯示‘最愛的電影’'
    },
    num: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      dnum: this.num
    }
  },
  methods: {
    liClick(item) {
      console.log('子組件的li被點擊了', item);
      let params = {
        id: 4,
        name: '暴力街區4'
      }
      this.$emit('click_to_parent', params);
    },
    inputchange(event) {
      //console.log(this.$parent.num);
      this.dnum = event.target.value;
      this.$emit('numinput', this.dnum);
    }
  },
  mounted: function() {
   
  }  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

【2】子傳父： $emit() 

以上的例子就是當點擊子組件的li時，觸發liClick事件，使用$emit()來發射一個事件click_to_parent到父組件中並傳遞參數item。

click_to_parent就是一個點擊事件，再次綁定父組件中的事件btnClick，此時父組件就可以拿到item這個參數了。完成數據由子到父的一個過程。

【3】$children 和$refs屬性，直接引用子組件中的數據。

$children使用不是很廣泛，不多說。

$refs屬性，當在父組件中引用多次子組件是，如果想拿到第二次引用的子組件裏面的數據內容。

 <child ref="child_ref" :movieslist1="movieslist" :message="message" :num="num" />

給引用子組件時設置一個ref數據值，在父組件中通過：this.$refs.child_ref可以直接拿到子組件對象，進而獲取子組件裏面的數據內容。

【4】$parent和$root屬性

$parent：在子組件裏面直接通過：this.$parent 來獲取父組件對象，進而獲取父組件裏面的數據內容。

$root：獲取的是index.html，也就是根