作用域插槽

• 父组件对子组件加工处理
• 既可以复用子组件的slot，又可以使slot内容不一致
• [AppleScript] 纯文本查看 复制代码

  <div id="app">
      <!-- 
  		1、当我们希望li 的样式由外部使用组件的地方定义，因为可能有多种地方要使用该组件，
  		但样式希望不一样 这个时候我们需要使用作用域插槽 
  		
  	-->  
      <fruit-list :list='list'>
         <!-- 2、 父组件中使用了<template>元素,而且包含scope="slotProps",
  			slotProps在这里只是临时变量   
  		---> 	
        <template slot-scope='slotProps'>
          <strong v-if='slotProps.info.id==3' class="current">
              {{slotProps.info.name}}		         
           </strong>
          <span v-else>{{slotProps.info.name}}</span>
        </template>
      </fruit-list>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
      /*
        作用域插槽
      */
      Vue.component('fruit-list', {
        props: ['list'],
        template: `
          <div>
            <li :key='item.id' v-for='item in list'>
  			###  3、 在子组件模板中,<slot>元素上有一个类似props传递数据给组件的写法msg="xxx",
  			###   插槽可以提供一个默认内容，如果如果父组件没有为这个插槽提供了内容，会显示默认的内容。
  					如果父组件为这个插槽提供了内容，则默认的内容会被替换掉
              <slot :info='item'>{{item.name}}</slot>
            </li>
          </div>
        `
      });
      var vm = new Vue({
        el: '#app',
        data: {
          list: [{
            id: 1,
            name: 'apple'
          },{
            id: 2,
            name: 'orange'
          },{
            id: 3,
            name: 'banana'
          }]
        }
      });
    </script>
  </body>
  </html>
  

• 购物车案例1.  实现组件化布局
  • 把静态页面转换成组件化模式
  • 把组件渲染到页面上
  • [AppleScript] 纯文本查看 复制代码

    <div id="app">
        <div class="container">
          <!-- 2、把组件渲染到页面上 --> 
          <my-cart></my-cart>
        </div>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        # 1、 把静态页面转换成组件化模式
        # 1.1  标题组件 
        var CartTitle = {
          template: `
            <div class="title">我的商品</div>
          `
        }
        # 1.2  商品列表组件 
        var CartList = {
          #  注意点 ：  组件模板必须是单个根元素  
          template: `
            <div>
              <div class="item">
                <img src="img/a.jpg"/>
                <div class="name"></div>
                <div class="change">
                  <a href="">－</a>
                  <input type="text" class="num" />
                  <a href="">＋</a>
                </div>
                <div class="del">×</div>
              </div>
              <div class="item">
                <img src="img/b.jpg"/>
                <div class="name"></div>
                <div class="change">
                  <a href="">－</a>
                  <input type="text" class="num" />
                  <a href="">＋</a>
                </div>
                <div class="del">×</div>
              </div>
              <div class="item">
                <img src="img/c.jpg"/>
                <div class="name"></div>
                <div class="change">
                  <a href="">－</a>
                  <input type="text" class="num" />
                  <a href="">＋</a>
                </div>
                <div class="del">×</div>
              </div>
              <div class="item">
                <img src="img/d.jpg"/>
                <div class="name"></div>
                <div class="change">
                  <a href="">－</a>
                  <input type="text" class="num" />
                  <a href="">＋</a>
                </div>
                <div class="del">×</div>
              </div>
              <div class="item">
                <img src="img/e.jpg"/>
                <div class="name"></div>
                <div class="change">
                  <a href="">－</a>
                  <input type="text" class="num" />
                  <a href="">＋</a>
                </div>
                <div class="del">×</div>
              </div>
            </div>
          `
        }
        # 1.3  商品结算组件 
        var CartTotal = {
          template: `
            <div class="total">
              <span>总价：123</span>
              <button>结算</button>
            </div>
          `
        }
        ## 1.4  定义一个全局组件 my-cart
        Vue.component('my-cart',{
          ##  1.6 引入子组件  
          template: `
            <div class='cart'>
              <cart-title></cart-title>
              <cart-list></cart-list>
              <cart-total></cart-total>
            </div>
          `,
          # 1.5  注册子组件   
          components: {
            'cart-title': CartTitle,
            'cart-list': CartList,
            'cart-total': CartTotal
          }
        });
        var vm = new Vue({
          el: '#app',
          data: {
    
          }
        });
    
      </script>
    
    
    

    
    
  
  

作用域插槽

• 父组件对子组件加工处理
• 既可以复用子组件的slot，又可以使slot内容不一致
• [AppleScript] 纯文本查看 复制代码

  <div id="app">
      <!-- 
  		1、当我们希望li 的样式由外部使用组件的地方定义，因为可能有多种地方要使用该组件，
  		但样式希望不一样 这个时候我们需要使用作用域插槽 
  		
  	-->  
      <fruit-list :list='list'>
         <!-- 2、 父组件中使用了<template>元素,而且包含scope="slotProps",
  			slotProps在这里只是临时变量   
  		---> 	
        <template slot-scope='slotProps'>
          <strong v-if='slotProps.info.id==3' class="current">
              {{slotProps.info.name}}		         
           </strong>
          <span v-else>{{slotProps.info.name}}</span>
        </template>
      </fruit-list>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
      /*
        作用域插槽
      */
      Vue.component('fruit-list', {
        props: ['list'],
        template: `
          <div>
            <li :key='item.id' v-for='item in list'>
  			###  3、 在子组件模板中,<slot>元素上有一个类似props传递数据给组件的写法msg="xxx",
  			###   插槽可以提供一个默认内容，如果如果父组件没有为这个插槽提供了内容，会显示默认的内容。
  					如果父组件为这个插槽提供了内容，则默认的内容会被替换掉
              <slot :info='item'>{{item.name}}</slot>
            </li>
          </div>
        `
      });
      var vm = new Vue({
        el: '#app',
        data: {
          list: [{
            id: 1,
            name: 'apple'
          },{
            id: 2,
            name: 'orange'
          },{
            id: 3,
            name: 'banana'
          }]
        }
      });
    </script>
  </body>
  </html>
  

• 购物车案例1.  实现组件化布局
  • 把静态页面转换成组件化模式
  • 把组件渲染到页面上
  • [AppleScript] 纯文本查看 复制代码

    <div id="app">
        <div class="container">
          <!-- 2、把组件渲染到页面上 --> 
          <my-cart></my-cart>
        </div>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        # 1、 把静态页面转换成组件化模式
        # 1.1  标题组件 
        var CartTitle = {
          template: `
            <div class="title">我的商品</div>
          `
        }
        # 1.2  商品列表组件 
        var CartList = {
          #  注意点 ：  组件模板必须是单个根元素  
          template: `
            <div>
              <div class="item">
                <img src="img/a.jpg"/>
                <div class="name"></div>
                <div class="change">
                  <a href="">－</a>
                  <input type="text" class="num" />
                  <a href="">＋</a>
                </div>
                <div class="del">×</div>
              </div>
              <div class="item">
                <img src="img/b.jpg"/>
                <div class="name"></div>
                <div class="change">
                  <a href="">－</a>
                  <input type="text" class="num" />
                  <a href="">＋</a>
                </div>
                <div class="del">×</div>
              </div>
              <div class="item">
                <img src="img/c.jpg"/>
                <div class="name"></div>
                <div class="change">
                  <a href="">－</a>
                  <input type="text" class="num" />
                  <a href="">＋</a>
                </div>
                <div class="del">×</div>
              </div>
              <div class="item">
                <img src="img/d.jpg"/>
                <div class="name"></div>
                <div class="change">
                  <a href="">－</a>
                  <input type="text" class="num" />
                  <a href="">＋</a>
                </div>
                <div class="del">×</div>
              </div>
              <div class="item">
                <img src="img/e.jpg"/>
                <div class="name"></div>
                <div class="change">
                  <a href="">－</a>
                  <input type="text" class="num" />
                  <a href="">＋</a>
                </div>
                <div class="del">×</div>
              </div>
            </div>
          `
        }
        # 1.3  商品结算组件 
        var CartTotal = {
          template: `
            <div class="total">
              <span>总价：123</span>
              <button>结算</button>
            </div>
          `
        }
        ## 1.4  定义一个全局组件 my-cart
        Vue.component('my-cart',{
          ##  1.6 引入子组件  
          template: `
            <div class='cart'>
              <cart-title></cart-title>
              <cart-list></cart-list>
              <cart-total></cart-total>
            </div>
          `,
          # 1.5  注册子组件   
          components: {
            'cart-title': CartTitle,
            'cart-list': CartList,
            'cart-total': CartTotal
          }
        });
        var vm = new Vue({
          el: '#app',
          data: {
    
          }
        });
    
      </script>