vue 插槽 part3

f

vue中的插槽

1.<slot>默认内容</slot>

当副组件不传递信息的时候 显示默认内容

2.<slot></slot> 显示的是插槽中所有的数据

不具名插槽只有一个

具名插槽(可以有多个)

父：<div slot="h"></div>

子： <slot name="h"></slot>

//template 中不能单独使用slot  要使用包裹

VUE中的作用域插槽 //作用域插槽需要用一层template包裹

<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>