vue中的插槽
1.<slot>默认内容</slot>
当副组件不传递信息的时候 显示默认内容
2.<slot></slot> 显示的是插槽中所有的数据
不具名插槽只有一个
具名插槽(可以有多个)
父:<div slot="h"></div>
子: <slot name="h"></slot>
//template 中不能单独使用slot 要使用包裹
VUE中的作用域插槽
<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] } } }) var vm = new Vue({ el: ".app", }) </script>
v-once 可以提高性能
一些静态内容展示效率
VUE动态组件
常规方法
<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>", }) var 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>
动态组件方法
<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>", }) var 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>