Vue前端框架11 组件事件与v-mode配合使用、组件数据传递（父传子）、插槽Slot、具名插槽、插槽中的数据传递（双向）
文章目录
-
- 一、组件事件与v-model配合使用
- 二、组件数据传递（子传父）
- 三、插槽Slots
- 四、具名插槽
- 五、插槽中的数据传递
一、组件事件与v-model配合使用
组件A的数据变化
组件B可以实时显示
<template>
<h3>Main</h3>
<p>搜索内容为:{{search}}</p>
<component-b @searchEvent="getSearch"></component-b>
</template>
<script>
import ComponentB from "@/components/componentB";
export default {
name: "componentA",
components: {ComponentB},
data(){
return{
search:""
}
},
methods:{
getSearch(data){
this.search=data
}
}
}
</script>
<style scoped>
</style>
<template>
搜索: <input type="text" v-model="search">
</template>
<script>
export default {
name: "componentB",
data(){
return{
search:""
}
},
//侦听器
watch:{
search(newvValue,oldValue){
console.log(oldValue)
this.$emit("searchEvent",newvValue)
}
}
}
</script>
<style scoped>
</style>
二、组件数据传递（子传父）
利用父组件的函数回调
<template>
<h3>Main</h3>
<p>搜索内容为:{{search}}</p>
<component-b @searchEvent="getSearch" :onEvent="dataFn"></component-b>
<p>this:{{message}}</p>
</template>
<script>
import ComponentB from "@/components/componentB";
export default {
name: "componentA",
components: {ComponentB},
data(){
return{
search:"",
message:""
}
},
methods:{
getSearch(data){
this.search=data
},
dataFn(data){
this.message=data
}
}
}
</script>
<style scoped>
</style>
<template>
搜索: <input type="text" v-model="search">
<p>{{onEvent(age)}}</p>
</template>
<script>
export default {
name: "componentB",
data(){
return{
search:"",
age:22
}
},
//侦听器
watch:{
search(newvValue,oldValue){
console.log(oldValue)
this.$emit("searchEvent",newvValue)
}
},props:{
onEvent:Function
}
}
</script>
<style scoped>
</style>
三、插槽Slots
解决的是组件传输一个完整的html结构 也就是一个模板内容
<template>
<parent-demo></parent-demo>
<component-a></component-a>
<slot-demo>
<div>
<h3>插槽标题</h3>
<!-- 插槽内容不是写死的 而是动态的-->
<p>{{ message }}</p>
</div>
</slot-demo>
</template>
<script>
import ParentDemo from "@/components/parentDemo";
import ComponentA from "@/components/componentA";
import SlotDemo from "@/components/slotDemo";
export default {
name: 'App',
components: {SlotDemo, ComponentA, ParentDemo},
data(){
return{
message:"hello"
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
<template>
<h3>插槽基础知识</h3>
<!-- slot 是一个插槽的出口 标示了 父元素提供的插槽内容将要在哪里被渲染 -->
<!-- 如果没有传插槽 在标签中间的内容 就是默认值-->
<slot>插槽默认值</slot>
</template>
<script>
export default {
name: "slotDemo"
}
</script>
<style scoped>
</style>
四、具名插槽
<template>
<parent-demo></parent-demo>
<component-a></component-a>
<slot-demo>
<!-- 通过template中的 v-slot属性 和 slot标签的 name对应 -->
<!-- v-slot的简写 可以 简写为# -->
<template v-slot:header>
<h3>插槽标题</h3>
</template>
<template #main>
<p>{{ message }}</p>
</template>
</slot-demo>
</template>
<script>
import ParentDemo from "@/components/parentDemo";
import ComponentA from "@/components/componentA";
import SlotDemo from "@/components/slotDemo";
export default {
name: 'App',
components: {SlotDemo, ComponentA, ParentDemo},
data(){
return{
message:"hello"
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
<template>
<h3>插槽基础知识</h3>
<!-- slot 是一个插槽的出口 标示了 父元素提供的插槽内容将要在哪里被渲染 -->
<!-- 如果没有传插槽 在标签中间的内容 就是默认值-->
<slot name="header">插槽默认值</slot>
<hr>
<slot name="main"></slot>
</template>
<script>
export default {
name: "slotDemo"
}
</script>
<style scoped>
</style>
五、插槽中的数据传递
在某些情况下，插槽的内容可能同时需要用到父子两个组件的数据，所以需要方法将子组件在渲染时候将一部分数据提供给插槽
<template>
<parent-demo></parent-demo>
<component-a></component-a>
<slot-demo>
<!-- 通过template中的 v-slot属性 和 slot标签的 name对应 -->
<!-- v-slot的简写 可以 简写为# -->
<template v-slot:header>
<h3>插槽标题</h3>
</template>
<template #main>
<p>{{ message }}</p>
</template>
</slot-demo>
<SlotAttr>
<!-- 建议指明对应的插槽名称-->
<template v-slot:main="slotProps">
<p>{{currentTest}}</p>
<p>{{slotProps.msg}}</p>
</template>
</SlotAttr>
</template>
<script>
import ParentDemo from "@/components/parentDemo";
import ComponentA from "@/components/componentA";
import SlotDemo from "@/components/slotDemo";
import SlotAttr from "@/components/slotAttr";
export default {
name: 'App',
components: {SlotAttr, SlotDemo, ComponentA, ParentDemo},
data(){
return{
message:"hello",
currentTest:"测试内容"
}
}
}
</script>
<template>
<h3>插槽plus</h3>
<!-- 子元素的数据想要显示 则需要将数据传给父元素
父元素接收后和父元素原本的内容 一起传给子元素
-->
<slot :msg="childMessage" name="main">
</slot>
</template>
<script>
export default {
name: "slotAttr",
data(){
return{
childMessage:"子组件数据"
}
}
}
</script>
<style scoped>
</style>