说出vue中的几种指令和他的用法_vue中插槽有哪些用法

vue中<slot></slot>标签代表插槽

一、内容插槽

顾名思义,插槽的作用就是存放内容

html代码如下:

<test-man>
      <v-card dark>
        is handsome
      </v-card>
</test-man>

javascript代码如下:

Vue.component('test-man', {
    template:`
    <v-card>
      <div>
      pingchangxin
      </div>
      <slot>
      </slot>
    </v-card>
    `
  })

效果如下:

cfe89016616b672e8c4b554fad0d05ca.png

二、后备插槽

在组件模板的<slot></slot>中添加内容,如果html利用的这个组件中没有内容的话,就是默认显示插槽里面的内容,如果有内容则覆盖插槽中的内容 html代码如下:

<test-man></test-man>
<test-man>
  <v-btn>保存</v-btn>
</test-man>

javascript代码如下:

Vue.component('test-man', {
    template:`
    <v-card>
      <div>
      pingchangxin
      </div>
      <slot>
      <v-btn>提交</v-btn>
      </slot>
    </v-card>
    `
  })

效果如下:

6fa252723b2a5473f73fff6ba89194a9.png

三、作用域插槽

这类插槽可以让父组件使用子组件的数据,只需子组件在插槽中用v-bind绑定自身的数据,然后父组件在使用组件时就可以用v-slot="slotProps"接收,注意:这里的slotProps可以自定义。

html代码如下:

<test-man v-slot="slotProps">
      <v-btn >{{slotProps.obj2.name}}</v-btn>
    </test-man>

javascript代码如下:

Vue.component('test-man', {
    data(){
      return {
        obj2:{
        name:'zhubajie',
        age:3
        }
      }
    },
    template:`
    <v-card>
      <div>
      pingchangxin
      </div>
      <slot v-bind:obj2="obj2">
      </slot>
    </v-card>
    `
  })

效果如下:

a171d7c86b17c9aee6f7a7ae643a53b1.png

四、具名插槽

这类插槽可以有多个,每个都用name属性绑定一个不同的名字,在接收内容时避免发生混乱,在组件使用时用v-slot:名字的方式进行绑定。

html代码如下:

<test-man>
      <template v-slot:second>
        <span>这是第二个插槽的内容</span>
      </template>
      <template v-slot:first>
        <span>这是第一个插槽的内容</span>
      </template>
    </test-man>

javascript代码如下

Vue.component('test-man', {
    data(){
      return {
        obj2:{
        name:'zhubajie',
        age:3
        }
      }
    },
    template:`
    <v-card>
      <div>
      pingchangxin
      </div>
      <div>
      <slot name="first">
      </slot>
      </div>
      <span>-----这是一条分界线-----</span>
      <div>
      <slot name="second">
      </slot>
      </div>
    </v-card>
    `
  })

效果如下:

677dd07afe5edc267bca6f7f68aa8161.png
已标记关键词 清除标记
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页