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

    父组件通过子组件数据,替换插槽数据

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
      </head>
    
      <body>
        <div id="app">
          <comp> </comp>
          <comp>
            <template slot-scope="slot">
              <ul>
                <li v-for="book in slot.data">{{book.name}}:{{book.price}}</li>
              </ul>
            </template>
          </comp>
        </div>
    
        <template id="comp">
          <div id="">
            <p>{{message}}</p>
            <slot :data="books">
              <ul>
                <li v-for="book in books">{{book.name}}</li>
              </ul>
            </slot>
          </div>
        </template>
    
        <script>
          // 子组件
          const comp = Vue.extend({
            template: '#comp',
            data() {
              return {
                message: 'Hello furong!',
                books: [{
                    name: 'HTML/HTML5基础',
                    price: 15.5,
                  },
                  {
                    name: '高健壮性CSS',
                    price: 16.5,
                  },
                  {
                    name: '深入学习JS',
                    price: 17.5,
                  },
                ]
              }
            },
          })
    
          // root
          const app = new Vue({
            el: '#app',
            data: {
              message: 'Hello Vue.js!',
            },
            components: {
              comp,
            },
          })
        </script>
      </body>
    </html>
    

  • 相关阅读:
    网络七层模型
    border-radius 50% 和100%
    数据绑定
    前端一些基础的重要的知识2
    用 ul 和 li 模拟select控件
    两列布局
    盒子的水平垂直居中几种方法
    TCP时间戳
    帧聚合
    skb buff数据结构
  • 原文地址:https://www.cnblogs.com/zhangxuechao/p/14976958.html
Copyright © 2011-2022 走看看