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>