vue 父子组件通信props/emit

<parent>
<child :childMsg="msg"></child>//这里必须要用 - 代替驼峰
</parent>data(){
return {
msg: [1,2,3]
};
}

<template>
<div @click="up"></div>
</template>methods: {
up() {
this.$emit('up','hello'); //主动触发up方法，'hello'为向父组件传递的数据
}
}

<div>
<child @up="change" :msg="msg"></child> //监听子组件触发的upup事件,然后调用change方法
</div>methods: {
change(msg) {
this.msg = msg;
}
}

// 父组件
<template>
<div>
父组件{{number}}
<child v-bind:num.sync="number"></child>
</div>
</template><script>
import child from './Child'
export default {
name: 'HelloWorld',
data () {
return {
number: 1
}
},
components: {
child
}
}
</script>

// 子组件
<template>
<div>子组件
<div>{{num}}</div>
<div @click="increment">点击</div>
</div>
</template><script>
export default {
data () {
return {
}
},
mounted () {
console.log(this.title)
},
props: ['num'],
methods: {
increment: function () {
this.$emit('update:num', '8888')
}
}
}
</script>

<!--v-model写法-->
<my-component type="text" v-model="value">
<!--编译后的写法-->
<my-component type="text"
:value="value"
@input="value = $event.target.value"
>
<!--
默认针对原生组件input事件，但是如果子组件定义了针对事件
model: {
prop: "value",
event: "update"
},
则编译为
-->
<my-component type="text"
:value="value"
@update="(val) => value = val"
>

<!--语法糖.sync-->
<my-component :value.sync="value" />
<!--编译后的写法-->
<my-component
:value="msg"
@update:value="(val) => value = val"
>