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，也就是根