vue自带的父子组件之间数据传递

prop父组件传递数据给子组件，子组件要声明props

<div id="app">
    <div>
        <child :message="parentMsg"></child>
    </div>
</div>
<script>
//注册
Vue.component('child',{
    //声明props
    props:['message'],
    template:'<span>{{message}}</span>'
})
//创建根实例
new Vue({
    el:'#app',
    data:{
        parentMsg:'父组件内容'
    }
})
</script>

父组件是使用props传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件。

使用$on(eventName)监听事件 使用$emit(eventName)触发事件

钩子函数： bind:只调用一次，指令第一次绑定到元素时调用

inserted:被绑定元素插入到父节点时调用（父节点存在即可调用，不存在于document中）

update:被绑定元素所在的模版更新时调用

componentUpdated:被绑定元素所在模版完成一次更新周期时调用

unbind:只调用一次，指令与元素解绑时调用

示例：

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

子组件children.vue： 某个触发条件的方法里面存放以下代码

this.$emit('childrenParams',this.params)

父组件parent.vue：

// 引入子组件 
<children @childrenParams="getChildrenParams"></children>

// 获取参数:
getChildrenParams(msg){
  this.data = msg
}

子组件触发父级组件的方法也是一样的道理 父组件parent.vue

<children @aa="showTest"></children>

methods: {
  showTest () {....}
}

子组件children.vue

<div @click="$emit('aa')">

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

父组件parent.vue 父组件中定义值、调用子组件并引用、在引用的标签上给子组件传值

<children :parentParams="parentParams"></children>

子组件children.vue

props: {
  parentParams: {
       type: String,
       required: true
   }
}
// 也可以写成：
props: ['parentParams']

之后可以在子组件中直接使用parentParams

子组件接受的父组件的值分为引用类型和普通类型两种：

普通类型：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null）
引用类型：数组（Array）、对象（Object）

注意：父组件传给子组件的值，在子组件中千万不能修改，因其数据是公用的，改了所有引用的子组件就都改了。

Narutocc / Vue