02.Vue中父子组件的数据传递（新手记录学习过程）

1.父组件向子组件传递数据

<script src="../js/vue.js"></script>

<div id="app">
  <cpn :get_parent="parentMessage"></cpn>
</div>

<template id="child">
  <div>
    <h2>我是子组件</h2>
    <h2>父组件传过来的数据:{{get_parent}}</h2>
  </div>
</template>

<script>
  /** 父子组件之间的数据传递
   *    父传子 子组件接收数据
   *    1.子组件通过props 接收数据
   *    2.并在使用子组件时 绑定接收数据的data名 和父组件的原data名
   * */
  const vm = new Vue({
    el: "#app",
    data: {
      parentMessage : 'Hello Son'
    },
    components : {
      cpn : {
        template : '#child',
        props : {
          get_parent : {
            type : String,    /** 设置接收的数据类型*/
            default(){       /** 默认值*/
              return null
            }
          }
        }
      }
    }
  })
</script>

---

2.子组件向父组件传递数据

<div id="app">
  <cpn @send="get_child"></cpn>
  <h2>子组件传递过来的数据:{{message}}</h2>
</div>

<template id="child">
  <div>
    <h2>我是子组件</h2>
    <button @click="sendMess">向父组件传递数据</button>
  </div>
</template>

<script>
  /** 父子组件之间的数据传递
   *    父传子 子组件接收数据
   *    1.子组件通过$emit 发送事件和数据
   *    2.父组件通过methods获取子组件传递过来的数据
   *    3.父组件通过v-on绑定事件和接收数据的方法
   * */
  const vm = new Vue({
    el: "#app",
    data: {
      parentMessage : 'Hello Son',
      message : ''
    },
    methods: {
      get_child(mess){
        this.message = mess
      }
    },
    components : {
      cpn : {
        template : '#child',
        data(){
          return {
            childMessage : 'Hello father'
          }
        },
        methods :{
          sendMess(){
            this.$emit('send',this.childMessage)
          }
        }
      }
    }
  })
</script>