组件交互（Props和$emit)

Props

将父组件中的数据传到子组件中，在父组件中引入子组件，子组件通过props来接收

注意组件引入

父组件App.vue

<template>
    <div>
        我是父组件
    <Son :title="myTitle"></Son>
    </div>
</template>

<script>
// import 和components 引入组件
import Son from './components/Son.vue'
export default{
    data(){
        return{
            myTitle:'vue'
        }
    },
    components:{
        Son
    }
}
</script>

子组件Son.vue

<template>
    <div>
        我是子组件{{ title }}
    </div>
</template>

<script>
export default{
    //子组件通过props进行接收
    props:['title']
}
</script>

$emit（自定义事件交互）

子组件数据传递给父组件。在子组件的emit中定义自定义事件，在父组件中使用然后触发父组件中定义的方法，修改myTitle的内容，最后子组件还可通过props进行接收父组件所改内容。

注意组件引入

父组件App.vue

<template>
    <div>
        我是父组件
    <Son :title="myTitle" @changeTitle = "handlechange"></Son>
    <!-- 注意changeTitle为子组件的自定义事件-->
    </div>
</template>

<script>
// import 和components 引入组件
import Son from './components/Son.vue'
export default{
    data(){
        return{
            myTitle:'vue'
        }
    },
    methods:{
        handlechange(newTitle){
            this.myTitle=newTitle
    },
    components:{
        Son
    }
}
</script>

子组件Son.vue

<template>
    <div>
        我是子组件{{ title }}
        <button @click="changeFn">修改title</button>
    </div>
</template>

<script>
export default{
    //子组件通过props进行接收
    props:['title'],
    methods:{
        changeFn(){
            //通过emit，向父组件发送消息通知
            this.$emit('changeTitle','新的标题')//第一个引号下为自定义事件，第二个引号下为传参
        }
    }
}
</script>

Props校验

props的校验写法

<script>
export default{
    props:{
        校验属性名:{
            type:Number,
            required:true,
            default:"默认标题"
            validator(value){
                //自定义校验方法
                return 是否通过校验
            }
        }
    }  
}

注：当校验类型为数组时（type:Array),默认值必须采用函数的形式

default:Function(){  //大写

        return【】//数组

}