slot具名插槽 通过 slot 的 name 属性可以指定插入多个内容。
VUE子组件自定义事件在父组件显示
<template>
<div>
<h3>父组件</h3>
输入得显示:{{value}}
<child v-on:huoQuNums="aaa">
<span slot="header">this is content</span>
<span slot="body">this is body</span>
</child>
</div>
</template>
<script>
import child from "./compontents/child.vue";
export default {
components: {
child
},
data() {
return {
value: ""
};
},
methods:{
aaa:function(v){
this.value=v
}
}
};
</script>
<style>
</style>
<template>
<div>
<h3>child组件</h3>
<input type="text" v-model="nums" @input="getInput" />
<div style="style">
<div class="header">
<slot name="header"></slot>
</div>
<div class="body">
<slot name="body"></slot>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
nums:'',
style: {
width: "200px",
height: "200px",
border: "1px solid #ccc"
}
};
},
methods: {
getInput() {
this.$emit("huoQuNums",this.nums)
}
}
};
</script>
<style>
.header {
background: pink;
display: block;
height: 200px;
width: 200px;
}
.body {
background: yellowgreen;
display: block;
height: 200px;
width: 200px;
}
</style>