vue slot 插槽的使用

喜欢ヅ旅行 2022-03-20 11:26 179阅读 0赞

父组件

<template>
        <div>
            <h3>这里是父组件</h3>
            <ceshitab :lists='lists'> 
             <div slot="ceshi" slot-scope="item"> 
               <div v-if='item.val.id =="one"' style="color:red">{
       { item.val.name }}</div> 
               <div v-else-if='item.val.id =="foure"' style="color:blue">{
       { item.val.name }}</div>
               <div v-else>
                  {
       { item.val.name }} -- 其它
               </div>
            </div>
              <div slot="boy">这是男性频道</div>
               <div>这是默认插槽</div>
            </ceshitab>
        </div>
    </template>
    <script>
    import ceshitab from './ceshitab'
    
    export default {
      data () {
        return {
          lists: [
            {id: 'one', name: '张三'},
            {id: 'two', name: '李四'},
            {id: 'three', name: '王二'},
            {id: 'foure', name: '麻子'}
          ]
        }
      },
      components: {
        ceshitab
      }
    }
    </script>

子组件

<template>
        <div>
            <h3>{
       { titles }}</h3>
           <ul>
              <li v-for="list in lists"> 
                  <slot name='ceshi' :val="list"></slot> 
              </li>
          </ul>
        </div>
    </template>
    <script>
    export default {
      name: 'ceshitab',
      props: ['lists'],
      data () {
        return {
          titles: '这是子组件'
        }
      }
    }
    </script>

vue slot

发表评论取消回复

表情：

评论列表（有 0 条评论，179人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue slot插槽

一、介绍：slot可以理解为占位符，在子组件中给父组件站位。二、举例说明： 1、没有插槽：（1）父组件： <template> <div>

墨蓝/ 2022年12月27日 01:30/ 0 赞/ 171 阅读

相关 Vue的Slot插槽的使用

Vue的Slot插槽的使用 Vue中我们使用 `<slot>` 元素作为承载分发内容的出口，可以引用在组合组件的场景中。下面我用一个综合案例来表现插槽的使用：

雨点打透心脏的1/2处/ 2022年11月07日 13:30/ 0 赞/ 112 阅读

相关 Vue插槽slot的使用

vue官方文档中关于slot插槽的说明很简短，语言又写的很凝练,这就有可能造成初次接触插槽的开发者容易产生“算了吧，回头再学，反正已经可以写基础组件了”的想法，于

浅浅的花香味﹌/ 2022年10月10日 04:41/ 0 赞/ 133 阅读

相关 Vue_使用插槽（slot）

当父组件向子组件传值的时候，有时候，父组件传的并不是单纯的数值、字符串，有可能是带标签（DOM）的数据，那么如何传值呢？如果我们像正常父向子传值那样操作。 <sl

╰半夏微凉°/ 2022年05月22日 13:42/ 0 赞/ 255 阅读

相关 Vue slot插槽

我们对于slot这个概念或许不是很清楚，但是我们在实际的使用中可能已经遇到很多次了。比如我们在使用ivew组件库的时候，就会经常遇到slot这个单词。而实际上，slot的使用更

一时失言乱红尘/ 2022年05月12日 12:38/ 0 赞/ 207 阅读

相关 Vue-slot插槽

1、插槽内容 ![20190125111259437.png][] <script src="https://cdn.jsdelivr.net/npm/vue

忘是亡心i/ 2022年04月23日 07:56/ 0 赞/ 256 阅读

相关 Vue之插槽(slot)

slot：向组件内部指定位置传递内容单个插槽（匿名插槽）在App.vue引入子组件About.vue,在about标签加上一个div标签传递到子组件中： Ap

青旅半醒/ 2022年04月18日 01:53/ 0 赞/ 219 阅读

相关 vue slot 插槽的使用

父组件 <template> <div> <h3>这里是父组件</h3> <ceshitab :li

喜欢ヅ旅行/ 2022年03月20日 11:26/ 0 赞/ 180 阅读

相关 vue 插槽 slot

\[vue\] 插槽 slot  <div data-note-content="" class="show-conte

小咪咪/ 2022年01月20日 05:34/ 0 赞/ 273 阅读

相关 vue 插槽slot的基本使用

1.基本使用 <div id="root"> <child> <p>Dell</p>

r囧r小猫/ 2021年11月02日 09:16/ 0 赞/ 491 阅读