1、自定义事件
自定义事件需要使用到$emit(eventName,params)
函数,编写一个组件MyComp.vue
,定义sendParamHandler
函数发送参数
<!-- 使用$emit自定义事件传递参数 -->
<template>
<div>
<p>{{ title }}</p>
<button @click="sendParamHandler">send</button>
</div>
</template>
<script>
export default {
name:"MyComp",
data(){
return{
msg:"测试子传父"
}
},
props:{
title:{
type:String,
default:"参数测试"
}
},
methods:{
sendParamHandler () {
this.$emit("myEvent",this.msg)
}
}
}
</script>
在App.vue
中,定义eventHandle
r函数,并绑定到myEvent
事件上,接受data参数
<template>
<div id="app">
<p>{{ msg }}</p>
<MyComp title="参数测试" @myEvent="eventHandler"/>
</div>
</template>
<script>
import MyComp from './components/MyComp'
export default {
name: 'App',
data(){
return{
msg:""
}
},
components: {
MyComp
},
methods:{
eventHandler(data){
this.msg = data;
}
}
}
</script>
2、插槽
插槽使用<slot>
元素渲染数据,在组件MyComp.vue
中
<!-- 插槽 -->
<template>
<div>
<!-- 1、插槽内容 -->
<slot>默认数据</slot>
<!-- 2、具名插槽 -->
<slot name="n"></slot>
<!-- 3、作用域插槽 -->
<slot :message="message"></slot>
</div>
</template>
<script>
export default {
name:"MyComp",
data(){
return{
message:"作用域插槽的数据"
}
}
}
</script>
在App.vue
中
<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<div id="app">
<MyComp>
<!-- 1、插槽内容 -->
<div>插槽测试</div>
{{ msg }}
<hr />
<!-- 2、具名插槽 -->
<template v-slot:n>
具名插槽
</template>
<hr />
<!-- 3、作用域插槽 -->
<template v-slot:default="slotProps">
<div>作用域插槽:{{slotProps.message}}</div>
</template>
</MyComp>
</div>
</template>
<script>
import MyComp from './components/MyComp'
export default {
name: 'App',
data(){
return{
msg:"编译作用域"
}
},
components: {
MyComp
}
}
</script>