美文网首页
Vue01组件化实践-03 插槽 slot

Vue01组件化实践-03 插槽 slot

作者: v雪狐v | 来源:发表于2020-07-02 18:12 被阅读0次

组件化 slot 插槽

demo github地址:feature/slot 分支

直接上代码体会插槽的使用吧

<!-- parent -->
<template>
  <div class="home">
    <p>Home</p>
    <i>{{msg}}</i>
    <Child>
      <p>这是传给第一个插槽的内容</p>
      <p slot="second">这是传给第二个插槽的内容</p>
      <hr/>
      <template v-slot:second="slotProps">
        {{ slotProps.slotObj }}
      </template>
    </Child>
  </div>
</template>

<script>
import Child from "../components/Child"
export default {
  name: 'Home',
  components: {
    Child
  },
  data() {
    return {
      msg: '父组件的msg在父组件的作用域'
    }
  }
}
</script>
<!-- child -->
<template>
  <div>
    <p>Child</p>
    <i>{{msg}}</i>
    <p>第一个插槽(default)</p>
    <slot></slot>
    <p>第二个插槽(name="second")</p>
    <slot name="second" :slotObj="slotObj"></slot>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: '子组件的msg在子组件的作用域',
        slotObj: {
          firstName: '张三',
          lastName: '尼古拉斯'
        }
      }
    }
  };
</script>

相关文章

  • Vue01组件化实践-03 插槽 slot

    组件化 slot 插槽 demo github地址:feature/slot 分支 直接上代码体会插槽的使用吧

  • vue slot插槽

    v-slot 插槽的用法: 单个slot内容时: 子组件: 父组件: 多个slot内容时(具名插槽): 子组件: ...

  • 插槽slot

    插槽,占位符slot具名插槽,指定占位符slot、name作用域插槽,子组件占位符向父组件占位符通信。slot、s...

  • vue slot匿名插槽 / 具名插槽 / 作用域插槽

    slot 匿名插槽 slot 具名插槽 应用场景 slot 作用域插槽: 在父组件中可以获得子组件的数据,并在父组...

  • 2-6 vue 匿名插槽-slot

    匿名插槽-slot Slot插槽 —— 实现内容分发 什么是slot?slot的意思是插槽,其目的在于让组件的可扩...

  • slot-scope到底是什么

    插槽slot 插槽,也就是slot 插槽是组件的一块HTML模板 插槽就是要将父组件中的内容渲染到子组件中。就好像...

  • vue-api-内置组件

    component 动态组件 keep-alive 缓存组件 slot 插槽

  • vue 插槽slot向父组件传值

    子组件,里面有slot插槽,并在slot上绑定了text值 父组件通过slot-scope就可以拿到子组件slot...

  • Vue插槽:slot、slot-scope与指令v-slot使用

    不具名插槽 具名插槽 v-slotv-slot在组件中使用slot进行占位时,也是在slot标签内使用name 属...

  • slot内容分发

    1.编写组件my-slot1;2.在组件里添加(默认插槽或者具名插槽); 3.调用该组件(my-slot1),往插...

网友评论

      本文标题:Vue01组件化实践-03 插槽 slot

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