【Vue】Vue组件--下

编辑

一、组件事件--组件传递时间

二、组件事件--配合“v-model”使用

三、组件数据传递

四、插槽slot

1. 插槽作用域

2. 默认内容

3. 具名插槽

4. 插槽中的数据传递

5. 具名插槽传递数据

一、组件事件--组件传递时间

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

parent.vue:

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

child.vue:

<template><h3>Child</h3><button @click="clickEventHandle">传递数据</button>
</template>
<script>export default{data(){return{msg:"Child数据!"}},methods:{clickEventHandle(){//自定义事件this.$emit("someEvent",this.msg)}}
}</script>

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

1.父传子：props (子级不可变更父级传来的数据：只读)

2.子传父：自定义事件（ this.$emit ）

二、组件事件--配合“v-model”使用

v-model：输入的同时获取用户输入的信息

希望实现：组件A输入数据，组件B实时得到数据.

实现：

<template><ComponentB @searchEvent="getSearch"/><h3>Main</h3><p>搜索内容为：{{ search }}</p>
</template>
<script>
import ComponentB from './ComponentB.vue';export default{data(){return{search:""}},components:{ComponentB},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>

三、组件数据传递

组件之间的数据传递，props 和 自定义事件 两种方式

props：父传子

自定义事件：子传父

props通过额外方式实现子传父（回调函数）

原理：

实际上还是父传子父传给子一个函数子级实现函数的时候回传了一个数据。

<template><h3>ComponentA</h3><ComponentB :title="title" :onEvent="dataFn"/><p>{{ msg }}</p>
</template>
<script>
import ComponentB from './ComponentB.vue'
export default{data(){return{title:"标题",msg:""}},components:{ComponentB},methods:{dataFn(data){console.log(data);this.msg = data;}}
}
</script>

<template><h3>ComponentB</h3><p>{{ title }}</p><p>{{ onEvent('传递数据') }}</p>
</template>
<script>
export default{data(){return{}},props:{title:String,onEvent:Function}
}
</script>

四、插槽slot

组件能够接受任意类型的js值作为props，但组件要如何接收模板内容(html信息)呢？

在某些场景中，可能想要为子组件传递一些模板片段（div，a标签等），让子组件在它们的组件中渲染这些片段。

<template><SlotsBase><div><h3>插槽标题</h3><p>插槽内容</p></div></SlotsBase>
</template>
<script>
import SlotsBase from "./components/SlotsBase.vue";export default{components:{SlotsBase}
}
</script>
<style></style>

<template><h3>插槽知识</h3><slot></slot>
</template>

<slot>元素是一个插槽出口（slot outlet），标示了父元素提供的插槽内容将在哪里被渲染。

1. 插槽作用域

插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的。

2. 默认内容

在外部没有提供任何内容情况下，可以为插槽指定默认内容。

<template><Slot2Vue><!-- <h3>{{ msg }}</h3> --></Slot2Vue>
</template>
<script>
import Slot2Vue from './components/Slot2Vue.vue';export default{data(){return{msg:"插槽内容"}},components:{Slot2Vue}
}
</script>
<style></style>

<template><h3>slot2</h3><slot>插槽默认值</slot>
</template>
<script>
export default{data(){return{}}
}
</script>

3. 具名插槽

<template><Slot2Vue><template v-slot:header><h3>{{ msg }}</h3></template><template v-slot:main><p>内容</p></template></Slot2Vue>
</template>
<script>
import Slot2Vue from './components/Slot2Vue.vue';export default{data(){return{msg:"插槽内容"}},components:{Slot2Vue}
}
</script>
<style></style>

<template><h3>slot2</h3><slot name="header">插槽默认值</slot><hr><slot name="main">插槽默认值</slot>
</template>
<script>
export default{data(){return{}}
}
</script>

v-slot有对应的简写 # ，因此可以简写为。意思就是将这部分摹本片段传入子组件的header插槽中！

4. 插槽中的数据传递

在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。

要想做到这一点，我们需要一种方法来让子组件在渲染时将一部分数据提供给插槽，可以像对组件传递props那样，向一个插槽的出口上传递attributes。

<template><SlotSAttrVue v-slot="slotProps"><h3>{{ currentTest }} - {{ slotProps.msg }}</h3></SlotSAttrVue>
</template>
<script>
import SlotSAttrVue from './components/SlotSAttrVue.vue';export default{data(){return{currentTest:"测试内容"}},components:{SlotSAttrVue}
}
</script>
<style></style>

<template><h3>Slots数据传递</h3><slot :msg="chiildMessage"></slot><!-- <slot name="header" :msg="chiildMessage"></slot><slot name="main" :job="jobMessage"></slot> -->
</template>
<script>
export default{data(){return{//先传给父元素在<SlotSAttrVue> 再通过父元素在子元素slot中显示chiildMessage:"子组件数据",// jobMessage:"VUE"}}
}
</script>

5. 具名插槽传递数据

<template><SlotSAttrVue><template #header="slotProps"><h3>{{ currentTest }} - {{ slotProps.msg }}</h3></template><template #main="slotProps"><p>{{ slotProps.job }}</p></template></SlotSAttrVue>
</template>
<script>
import SlotSAttrVue from './components/SlotSAttrVue.vue';export default{data(){return{currentTest:"测试内容"}},components:{SlotSAttrVue}
}
</script>
<style></style>

<template><h3>Slots数据传递</h3><slot name="header" :msg="chiildMessage"></slot><slot name="main" :job="jobMessage"></slot>
</template>
<script>
export default{data(){return{//先传给父元素在<SlotSAttrVue> 再通过父元素在子元素slot中显示chiildMessage:"子组件数据",jobMessage:"VUE"}}
}
</script>