zoukankan      html  css  js  c++  java
  • 作用域插槽

    应用场景:父组件对子组件的内容进行加工处理

    我们先来看2.6版本之前的写法:

    // 父组件
    <template>
      <div id="app">
        <child>
          <template slot-scope="a">
            <p v-text="a.item"></p>
          </template>
        </child>
      </div>
    </template>
    <script>
    import child from './child';
    export default {
      name: 'app',
      components: {
        child
      }
    }
    </script>
    //子组件
    <template>
      <div>
        <ul>
          <li v-for="(item,index) in items" :key="index">{{item}}
            <slot :item='item'></slot>
          </li>
        </ul>
      </div>
    </template>
    <script>
    export default {
      data () {
        return {
          items:['Webkit','Gecko','Trident','Blink']
        }
      }
    }
    </script>

    再来看2.6版本之后的写法,子组件的写法不用变,和原来一模一样,来看父组件的写法:

    // 父组件
    <template>
      <div id="app">
        <child>
          <template v-slot="a">
            <p v-text="a.item"></p>
          </template>
        </child>
      </div>
    </template>
    <script>
    import child from './child';
    export default {
      name: 'app',
      components: {
        child
      }
    }
    </script>

    我们可以清晰的看到,在子组件中有个插槽slot通过v-bind绑定了一个值item,在父组件中引用了子组件child,child标签里面可以看到作用域插槽template,此时slot-scope就是一个对象,这个对象是由子组件的插槽slot所绑定的值所组成的一个对象,比如在这里slot-scope = {item},这里的item来自子组件,而这里slot-scope的值是a,所以就有了下面的

    <p v-text="a.item"></p>

    说到这里,想必大家都应该明白了作用域插槽了吧,简单来说就一句话:可以绑定数据的插槽,显示内容完全由子组件决定,数据来自子组件。

    如果绑定数据太多,而你不需要全都用到的时候可以使用es6的对象解构

  • 相关阅读:
    sql server 日期格式化
    DPDK latencystats库使用方案
    PPTP协议握手流程分析--转载
    北京联通IPTV 数码视讯 Q1 破解过程
    Linux发不出分片包的问题分析
    近期团队比较动荡
    ab输出信息解释以及Failed requests原因分析
    salt源码安装
    imuxsock lost 353 messages from pid 20261 due to rate-limiting 解决办法
    解决vue路由history模式刷新后404的问题
  • 原文地址:https://www.cnblogs.com/ccv2/p/13251573.html
Copyright © 2011-2022 走看看