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

文章目录

- - - 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>