vue.js之插槽（v-slot）

插槽

• 父组件在引用子组件时希望向子组价传递模板内容；
• 子组件让父组件传过来的模板内容在所在的位置显示；
• 子组件中的就是一个槽，可以接收父组件传过来的模板内容， 元素自身将被替换；
• 用户可以拓展组件，去更好地复用组件和对其做定制化处理。

默认插槽

<div id="app">div>

Vue.component("TodoList", {
     
        props:["list"],
        methods: {
     
          handleClick() {
     
           this.count++;
          },
        },
        data() {
     
          return {
     
            count: 0,
          };
        },
        template: `

          

            

              
            
           
            
        
`,
      });
      app = new Vue({
     
        el: `#app`,
        template: `
        
{
      {msg}}
            
               
            
        
`,
        data: {
     
          msg: "hello world",
          list:[{
     
            name:"xiaochen",
            age:18
          },{
     
            name:"xiaohei",
            age:90
          }]
        },
      });

具名插槽和插槽作用域

Vue.component("ComponentA", {
     
        methods: {
     
          handleClick() {
     
           this.count++;
          },
        },
        data() {
     
          return {
     
            count: 0,
          };
        },
        template: `
ComponentA
        组件：{
      {count}}
        

        

        

        click
        
`,
      });

      app = new Vue({
     
        el: `#app`,
        template: `
        
{
      {msg}}
            
                
               main
                  
            
        
`,
        data: {
     
          msg: "hello world",
        },
      });