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

news2024/11/17 22:31:05

文章目录

- - - 1.组件传递Props校验
    - - 1.1.默认值
      - 1.2.必选项
      - 1.3.注意事项：props 是只读的
    - 2.组件事件-组件传递数据
    - - 2.1.温馨提示：组件之间传递数据的方案
    - 3.组件事件-配合“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>