Vue父子组件数据传递

父组件向子组件传值,通过props，单项绑定，只能传值给子组件，防止改变父组件的值

1、父组件

<template>
    <Child :info='msg'></Child>
</template>
<script>
import Child from './Child.vue'
export default(
    components:{
        Child
    },
    data(){
        return {
            msg:'父组件'
        }
    }
)
</script>

2、子组件

<template>
    <div>
        <span>父组件传递的值：{{msg}}</span>
    </div>
</template>
<script>
export default(
    props:['info'],
    data(){
        return {
            msg:this.info
        }
    }
)
</script>

props指定类型：

    props:{
        title: String,
        likes: Number,
        isPublished: Boolean,
        commentIds: Array,
        author: Object
    }

子组件向父组件传递数据

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

<!-- 父组件 -->
<template>
    <Child @sonMethod='fatherMethod'></Child>
</template>
<script>
import Child from './Child.vue'
export default(
    components:{
        Child
    },
    data(){
        return {
            msg:'父组件'
        }
    },
    methods:{
        sonMethod(data){
            console.log(data)
        }
    }
)
</script>
<!-- 子组件 -->
<template>
    <div>
        <button @click='sendToFather'>子按钮</button>
    </div>
</template>
<script>
export default(
    data(){
        return {
            msg:'11'
        }
    },
    methods:{
        sendToFather(){
            this.$emit('sonMethod',this.msg)
        }
    }
)
</script>

父子组件数据同步

<my-dialog :visible.sync="dialogVisible" />
等价于
<my-dialog  :visible="dialogVisible"  @update:visible="newVisible=> dialogVisible = newVisible"/>

my-dialog 组件在 visible 变化时 this.$emit('update:visible', newVisible) 即可。