zoukankan      html  css  js  c++  java
  • Vue-插槽学习

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
      <div id="app">
        <child1>
          <header slot='header'>插槽header</header>
          <footer slot='footer'>插槽footer</footer>
        </child1>
        <hr/>
        <!-- 当我们使用 <child2> 组件的时候,我们可以选择为text定义一个不一样的 <template> 作为替代方案,
        并且可以通过 slot-scope 特性从子组件获取数据: -->
        <child2>
          <template slot-scope="slotProps">
            <p>第1个child2组件text是h1</p>
            <h1>{{slotProps.text}}</h1>
          </template>
        </child2>
        <child2>
          <template slot-scope="slotProps">
            <p>第2个child2组件text是h2</p>
            <h2>{{slotProps.text}}</h2>
          </template>
        </child2>
      </div>
    </body>
    <script type="text/javascript" src="./vue.js"></script>
    <script>
    Vue.prototype.bus=new Vue();
    //具名插槽
    Vue.component('child1',{
      template:`
         <div>
           <slot name='header'></slot>
           <p>child1内容</p>
           <slot name='footer'></slot>
         </div>
      `,
    })
    //作用域插槽
    //使用场景:我们希望每个child2组件都有可复用数据text,但是渲染出第东西又不太一样。
    Vue.component('child2',{
      data:function(){
        return{
          text:'子组件数据'
        }
      },
      template:`
         <div>
           <p>child2内容</p>
           <slot :text=text></slot>
         </div>
      `,
    })
    var app=new Vue({
        el:'#app',
    })
    </script>
    </html>
  • 相关阅读:
    登入界面的创建
    什么是IO流 以及文件输入输出
    java 的面向对象
    Mac 终端命令大全
    jQuery 的属性
    商城管理系统
    Java IO学习第二天部分详解
    Java IO学习第一天部分详解
    用JAVA描述一个车与修车厂两个事物
    JAVA基础(数组)数组排序和查找数组中是否还有某一个数
  • 原文地址:https://www.cnblogs.com/superlizhao/p/9633151.html
Copyright © 2011-2022 走看看