vue in the slot
1. <slot> Default Content </ slot>
When the deputy component does not pass information to display the default content
2. <slot> </ slot> shows all the data slots
Only one anonymous slot
Named slot (there can be multiple)
父：<div slot="h"></div>
子： <slot name="h"></slot>
// template slot can not be used alone to use package
VUE in scope slots
<section class="app">
<counter>
<template slot-scope="props">
<li>{{props.item}}</li>
</template>
</counter>
</section>
<script>
Vue.component("counter", {
template:` <section>
<ul>
<slot v-for="item of list"
:item="item">
</slot>
</ul>
</section>`,
data: function () {
return {
list:[1, 2, 3, 4]
}
}
})
was vm = new Vue ({
el: ".app",
})
</script>
v-once can improve performance
Some static content to show efficiency
VUE dynamic components
normal method
<section class="app">
<counter-one v-if="type === 'counter -one'"></counter-one>
<counter-two v-if="type === 'counter -two'"></counter-two>
<button @click="handle">Change</button>
</section>
<script>
Vue.component("counter-one", {
template:"<p>counter-one</p>",
})
Vue.component("counter-two", {
template:"<p>counter-two</p>",
})
was vm = new Vue ({
el: ".app",
data: {
type:"counter -one"
},
methods:{
handle: function () {
console.log("come")
this.type = this.type === "counter -one" ? "counter -two" : "counter -one"
}
}
})
</script>
Dynamic Component method
<component :is="type"></component>
<section class="app">
<component :is="type"></component>
<!-- <counter-one v-if="type === 'counter -one'"></counter-one>-->
<!-- <counter-two v-if="type === 'counter -two'"></counter-two>-->
<button @click="handle">Change</button>
</section>
<script>
Vue.component("counter-one", {
template:"<p>counter-one</p>",
})
Vue.component("counter-two", {
template:"<p>counter-two</p>",
})
was vm = new Vue ({
el: ".app",
data: {
type:"counter-one"
},
methods:{
handle: function () {
console.log("come")
this.type = this.type === "counter-one" ? "counter-two" : "counter-one"
}
}
})
</script>