父子组件传值

函数在mounted中执行后，必须进行销毁。

父组件向子组件传值（props）：

1. 父组件的data中定义值
2. 用import引入子组件
3. 在components中注入子组件
   （父组件对子组件调用、注册、引用）

import List from '../components/common/List.vue'
export default {
  data () {
    return {
      msg: '父组件',
      name: 'tom',
      age: '22',
      user: {
        id: 1234,
        userName: 'Jack'
      }
    }
  },
  //  注册 Hello 组件
  components: {
    List
  }
}

3. 在父组件中定义一个指令:message="msg" （message名称需要和子组件中的props保持一致,msg是要传递给子组件的数据）

<template>
    <div>
        <h3>我是 App 父组件</h3>
        <hr>
        <!-- 1. 在调用子组件时，绑定想要获取的父组件中的数据 -->
        <List :message="msg" :name="name" :user="user">			    </List>
        <router-view></router-view>
    </div>
</template>

5. 在子组件中定义props属性，msg的type可以自定义类型（但是必须和父组件中的数据类型一致，否则会报错），default是默认值。
   子组件中：

<template>
<p>{{message}} {{name}}</p>
</template>

export default{
props:["message","name"],
data(){
reuturn{
}
}
}

子组件向父组件传值（$emit）:

1. this.$emit("组件方法名","传递给父组件的数据") ,

(子组件用一个事件触发$emit方法，父组件中用childFn方法接收子组件中的数据；message是传递给父组件的数据)

2. 父组件调用、注册、引用子组件
3. 父组件通过子组件规定的事件名来创建一个函数，并接收子组件传递的数据。

<!-- 父组件 -->
<template>
    <div class="test">
      <test-com @childFn="parentFn"></test-com>
      <br/> 
      子组件传来的值 : {{message}}
    </div>
</template>

<script>
export default {
    // ...
    data: {
        message: ''
    },
    methods: {
       parentFn(payload) {
        this.message = payload;
      }
    }
}
</script>