zoukankan      html  css  js  c++  java
  • vue 开发系列(十) VUE 作用域插槽

    使用场景

    官方解释,有时让插槽内容能够访问子组件中才有的数据是很有用的。比如我们在使用ant-design-vue 的表格控件时。

     <a-table-column title="注释" dataIndex="comment"  >
                       <template slot-scope="text, record">
                         <rx-textbox v-model="record.comment" ></rx-textbox>
                        </template>
                     </a-table-column>

    这里从控件传递数据到父组件,我们在使用组件的时候,可以根据我们的需要显示需要的效果,表格控件并不需要关心如何实现数据的展示。

    我们怎么理解这个作用域插槽呢?

    下面我们举一个简单的例子还说明这个问题。

    实现过程

    编写子组件

    <template>
     <div class="child">
        <h3>这里是子组件</h3>
        <slot name="demo" :text="account" :record="user"></slot>
      </div>
    </template>
    
    <script>
    export default {
        name:"child",
        data(){
          return {
            user: ['张三','李四',"王五"],
            account:"ray"
          }
        }
    }
    </script>

    这里有两个知识点。

    1.具名插槽

    2.传递数据

    把帐号和记录数据传递出去。

    父组件代码

    <template>
      <div class="father">
        <child>
          <template  slot="demo" slot-scope="{text,record}">
           {{text}}
           <div v-for="item in record" :key="item">{{item}}</div>
          </template>
        </child>
         <child>
          <template  v-slot:demo="{text,record}">
           {{text}}
           <div v-for="item in record" :key="item">{{item}}</div>
          </template>
        </child>
      </div>
    </template>
    
    <script>
    import Vue from 'vue'
    
    import ChildSlot from '@/components/ChildSlot.vue'
    
    Vue.component(ChildSlot.name, ChildSlot);
    
    export default {
      name: 'HelloWorld',
     
    }
    </script>

    在这里例子中我展示了两种写法:

    slot="demo" slot-scope="{text,record}"

    这种写法 其实不推荐使用的,这个在2.6之后是需要废弃的。

    <template  v-slot:demo="{text,record}">

    推荐写法使用 v-slot 指令来实现。

     最终显示效果其实是一样的。

  • 相关阅读:
    基础命令
    RHEL7装机
    模拟项目
    配置NAT,PAT
    配置标准ACL,扩展ACL,命名ACL
    HSRP,STP配置
    三层交换配置及RIP动态路由
    vlan,trunk,DHCP,以太网通道
    ERRORS: MRBC.UserInfo.groups: (fields.E304) Reverse accessor for 'UserInfo.groups' clashes with reverse accessor for 'User.groups'. HINT: Add or change a related_name argument to the definition for '
    权限rbac(基于角色的访问控制)
  • 原文地址:https://www.cnblogs.com/yg_zhang/p/12078508.html
Copyright © 2011-2022 走看看