美文网首页Vue
Vue 组件 / 插槽

Vue 组件 / 插槽

作者: 羊烊羴 | 来源:发表于2018-03-20 16:55 被阅读3次
编译作用域
<child-component>
{{message}}
</child-component>
<!--在这里,{{massage}}的数据应该是父组件的数据,而不是child-componet的数据-->

在vue组件中作用域简单的说就是:

父组件模板的内容在父组件的作用域内编译,子组件模板的内容在子组件的作用域内编译

一个常见的错误是我们会试图在父组件内将一个指令绑定到子组件的属性/方法

<child-component v-show="someChildProperty"></child-component>

如果someChildProperty是子组件的属性,那么这种做法是无效的,在vue中父模板是不应该知道子组件状态的,如果想要通过子组件的someChildProperty来控制子组件的show/hide,那么应该在子组件内对其进行设置

单个插槽

在我们使用组件时,父组件在子组件标签内写入的内容都会被丢弃,例如

<child-component>
    <p>父组件的内容</p>  <!--不会显示-->
</child-component>

如果我们想要在子组件渲染时能够渲染出父组件添加的内容,需要为子组件组件中设置slot插槽

当子组件内只有一个没有属性的插槽时,父组件在调用子组件时在子组件内添加的内容将全部插入到插槽所在的DOM节点的位置,并替换掉插槽标签本身

最初在插槽标签内的任何元素都将会被视为默认内容,默认内容在子组件的作用域内编译,只有在宿主元素为空,且没有插入内容的时候才显示

<body>
<div id="box">
    <h4>This's parent</h4>
    <child>
        <h4>推荐好友列表</h4>
        <ul>
            <li>tom</li>
        </ul>
    </child>
</div>
<template id="childTem">
    <div>
        <h4>This's child</h4>
        <slot>
            <p>您还没有推荐好友~</p>
        </slot>
    </div>
</template>
<script>
   new Vue({
       components:{
           'child':{
               template:"#childTem"
           }
       }
   }).$mount("#box")
</script>
</body>
具名插槽

slot元素可以用一个特殊的属性name来配置如何分布内容,多个插槽可以有不同的名字,设置有name属性的插槽会匹配到父组件中具有相同值的具有slot属性的元素

仍然可以有匿名的插槽,它会作为默认插槽存在,在插槽找不到匹配的slot值或不具有name的插槽会被插入到匿名的插槽中

<body>
<div id="box">
    <h2>具名插槽</h2>
    <child>
        <h4 slot="header">{{parentMsg}}</h4>
        <p>Test</p>
        <div>
            <p>1.父组件数据</p>
            <p>2.展示slot使用方法</p>
        </div>
        <h6 slot="footer">parentFooter</h6>
    </child>
</div>
<template id="childTem">
    <div>
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot></slot>
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>
</template>
<script>
    new Vue({
        data: {
            parentMsg: 'parentHeader'
        },
        components: {
            'child': {
                template: '#childTem'
            }
        }
    }).$mount('#box')
</script>
</body>
作用域插槽

+2.1.0新增

作用域插槽是一种特殊类型的插槽,可以用来将子组件的数据展示到slot插槽中

在子组件中,只需要将数据传递到插槽,就像我们将props传递给组件一样,格式为

<slot :text="变量值"></slot>
<!--text是我们自定义的变量名,:表示是动态的,变量值为我们要从子组件中传递的数据-->

在父级中,具有特殊属性的的scope的template元素必须存在,表示这是作用域插槽的模板,scope的值对应一个临时变量名,此变量接收从子组件中传递的props对象,格式为:

<child>
  <template scope="props">
    <!--props是我们自定义的名称-->
    <span>{{props}}</span>
    <!--props会接收所有的slot上传递的变量值,并将其合成为一个对象,如上面的例子,打印props会得到
    {text:变量值}
    -->
  </template>
</child>
<body>
<div id="box">
    <child>
        <template  scope="props" slot="test">
            <li>{{props.item.name}}</li>
            <li>{{props.item.age}}</li>
        </template>
    </child>
</div>
<template id="childTem">
    <ul>
        <slot
              name="test"
              v-for="item in items"
              :item="item"
        ></slot>
    </ul>
</template>
<script>
    new Vue({
        components: {
            "child": {
                template: "#childTem",
                data() {
                    return {
                        items: [
                            {
                                name: 'xm',
                                age: 18
                            }
                        ]
                    }
                }
            }
        }
    }).$mount("#box")
</script>
</body>

相关文章

  • vue插槽slot

    -具名插槽 子组件Demo.vue 引用子组件的页面 -作用域插槽 子组件Demo.vue 引用子组件的页面

  • 【Vue】组件 - 插槽默认值

    基础知识 【Vue】组件 - 插槽的基本用法 【Vue】组件 - 多个插槽 子组件里,在 里写上默认的内容。 在父...

  • 2020-07-23 一次性讲明白vue插槽slot

    vue插槽slot 一、前言 vue官方文档中在"组件基础"内容中提到组件可以通过插槽分发内容,那插槽是怎么使用的...

  • vue插槽slot

    vue插槽slot 一、前言 vue官方文档中在"组件基础"内容中提到组件可以通过插槽分发内容,那插槽是怎么使用的...

  • Vue总结4-插槽,Vuex,VueRouter

    1.插槽 1.1匿名插槽 52-Vue组件-匿名插槽 ...

  • Vue插槽

    Vue 插槽 插槽用于向组件传递内容,插槽内可以包含任何模板代码,包括 HTML,甚至组件。如果 组件 没有包含一...

  • 插槽v-slot

    父子组件插槽的使用 父组件product.vue 子组件 ProductParam.vue

  • vue具名插槽使用

    插槽用法:子组件header固定;父组件outside插槽header/index.vue outside/ind...

  • vue 插槽

    插槽语法是Vue实现的内容分发API,用于复合组件开发。 匿名插槽 具名插槽 作用域插槽 将内容分发到子组件指定位置

  • Vue3:Slot 插槽

    1、匿名插槽 1.1 什么是插槽 插槽(Slot)是 vue 为组件的封装者提供的能力。允许开发者在封装组件时,把...

网友评论

    本文标题:Vue 组件 / 插槽

    本文链接:https://www.haomeiwen.com/subject/dwpbqftx.html