9.vue学习笔记(组件传递Props校验+组件事件-组件传递数据+组件事件-配合“v-model”使用)

1.组件传递Props校验

Vue组件可以更细致地声明对传入的 props 的校验要求
以下例子为接收String类型传输number控制台警告

接收多种类型
props:{
   
   title:{
   
       type:[String,Number,Array,Object]
   }
}

1.1.默认值

模拟情况：传递数据的时候并没有真实传递

<template>
    <h3>ComponentA</h3>
    <ComponentB :title="title" :age="age" :names="names"/>
</template>

<script>

import ComponentB from './ComponentB.vue';

export default{
   
    data(){
   
        return{
   
            title:"测试",
            //age:20,
            //names:["Tom","Bob"]
        }
    },
    components:{
   
        ComponentB
    }
}
</script>
________________________________________________________________________________
<template>
    <h3>ComponentB</h3>
    <p>{
   {
    title }}</p>
    <p>{
   {
    age }}</p>
    <ul>
        <li v-for="(name,index) of names" :key="index">{
   {
    name }}</li>
    </ul>
</template>

<script>
export default{
   
    data(){
   
        return{
   

        }
    },
    props:{
   
        title:{
   
            type:[String,Number,Array,Object]
        },
        age:{
   
            type:Number,
            default:0
        },
        //数字和字符串可以直接default，但是如果是数组和对象，必须通过工厂函数返回默认值
        names:{
   
            type:Array,
            default(){
   
                return ["xxx"]
            }
        }
    }
}
</script>

1.2.必选项

没有传值就会提示警告

1.3.注意事项：props 是只读的

2.组件事件-组件传递数据

在组件的模板表达式中，可以直接使用$emit方法触发自定义事件
触发自定义事件的目的是组件之间传递数据（子传父）

<template>
    <h3>组件事件</h3>
    <ChildVue @someEvent="getHandle"/>
    <p>父元素：{
   {
    message }}</p>
</template>
<script>

import ChildVue from "./Child.vue";

export default{
   
    data(){
   
        return {
   
            message:""
        }
    },
    components:{
   
        ChildVue
    },
    methods:{
   
        getHandle(data){
   
            console.log("触发了",data);
            this.message = data;
        }
    }
}

</script>
________________________________________________________________________________
<template>
    <h3>Child</h3>
    <button @click="clickEventHandle">传递数据</button>
</template>
<script>

export default{
   
    data(){
   
        return{
   
            msg:"Child数据!"
        }
    },
    methods:{
   
        clickEventHandle(){
   
            //自定义事件
            this.$emit("someEvent",this.msg)
        }
    }
}

</script>

2.1.温馨提示：组件之间传递数据的方案

1.父传子：props (子级不可变更父级传来的数据：只读)
2.子传父：自定义事件（ this.$emit ）

3.组件事件-配合“v-model”使用

v-model：输入的同时获取用户输入的信息
希望实现：组件A输入数据，组件B实时得到数据

<template>
    <SearchComponent @searchEvent="getSearch"/>
    <h3>Main</h3>
    <p>搜索内容为：{
   {
    search }}</p>
</template>
<script>
import SearchComponent from './SearchComponent.vue'

export default{
   
    data(){
   
        return{
   
            search:""
        }
    },
    components:{
   
        SearchComponent
    },
    methods:{
   
        getSearch(data){
   
            this.search = data
        }
    }
}
</script>
________________________________________________________________________________
<template>
    搜索：<input type="text" v-model.lazy="search">
</template>
<script>
export default{
   
    data(){
   
        return{
   
            search:""
        }
    },
    watch:{
   
        search(newValue,oldValue){
   
            this.$emit("searchEvent",newValue);
        }
    }
}
</script>