vue slot插槽理解

新手上路,根据vue官方手册记录学习内容,主要知识点如下.
  • 插槽内容
  • 命名插槽
  • 默认插槽内容
  • 插槽作用域

插槽内容

插槽是用于向子组件分发内容的,当在父组件中应用子组件时,子组件标签内的内容会分发到子组件模板中具有slot标签的位置.(如果子组件模板中没有slot标签,父组件里子组件标签内的内容会全部被丢弃掉的.)

源码:
<body>
    <template id="model">
        <div>
            <p>我是model组件的内容p>
        div>
    template>
    <div id="app">
            <p>我是段落一p>
            <p>我是段落二p>
    div>
body>

<script>
    var model = {
        template: "#model",
    }
    var vm = new Vue({
        el: "#app",
        components: {
            "model": model
        }
    })

script>

渲染结果:
<div id="app">
    <div>
        <p>我是model组件的内容p>
    div>
div>

命名插槽(具名插槽)

在某些地方需要用到多个插槽,就可以利用slot标签的的特殊属性name,使之与父组件中需要分发的内容通过slot=”name属性值”.产生关联.

源码:
<body>
    <template id="model">
        <div>
            <p>我是model组件的内容p>
            <slot name="paragrahy1">slot>
            <slot name="paragrahy2">slot>
            <slot>slot> //默认插槽,用于接受所有不匹配内容的插槽位置.
        div>
    template>
    <div id="app">
        <model>
            <p slot="paragrahy1">我是段落一p>
            <p slot="paragrahy2">我是段落二p>
            <p>我是段落三p>
        model>
    div>

body>
渲染结果:
<div id="app">
    <p>我是model组件的内容p>
    <p>我是段落一p>
    <p>我是段落二p>
    <p>我是段落三p>
div>

默认插槽内容

当有些场景需要插槽预先提供默认内容.(如果父组件模板中,向 slot 位置提供了内容,子组件 slot 元素的默认内容就会被替换。)

<body>
    <template id="model">
        <div>
            <slot>我是插槽默认内容slot> 
        div>
    template>
    <div id="app">
        <model>model>
    div>
body>
渲染结果:
<div id="app">
    <div>我是插槽默认内容div>
div>

插槽作用域 
插槽都是向下分发内容, 作用域插槽实现了子组件向父组件传递数据((2.5.+在父组件无论什么标签都能接受slot-scope,不仅局限在template标签上).

<body>
    <template id="model">
        <div>
            <slot v-bind:arr="list">slot>
        div>
    template>

    <div id="app">
        <model>
            <p slot-scope="slotname">{{slotname.arr}}p>
        model>
    div>
body>

<script>
    var model = {
        template: "#model",
        data: function () {
            return {
                list: "lalala"
            }
        }
    }
    var vm = new Vue({
        el: "#app",
        components: {
            "model": model
        }
    })
script>
渲染结果:
<div id="app">
    <div>
        <p>lalalap>
    div>
div>

注意点:
编译作用域:父组件模板的内容只在父组件作用域内编译.子组件模板的内容只在子组件作用域内编译.

eg:
<body>
    <template id="model">
        <div>
            <slot>slot>
        div>
    template>
    <div id="app">
        <model>
            <p>{{gender}}p>
        model>
    div>
body>

<script>
    var model = {
        template: "#model",
    }
    var vm = new Vue({
        el: "#app",
        data: function () {
            return {
                gender: "男"
            }
        },
        components: {
            "model": model
        }
    })
script>
渲染结果:
<div id="app">
    <div>
        <p>p>
    div>
div>

参考文档:
https://vuefe.cn/v2/api/
https://blog.csdn.net/Coder_Chang/article/details/80090000

你可能感兴趣的:(vue)