slot插槽

代码模板如下：

 <div id="app">
        <h1>插槽slot</h1>
        <h1>具名插槽</h1>
       <button-counter v-model="message"><p slot="header">h1标签</p>我是默认插槽</button-counter>
       {{message}}
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //定义组件
    Vue.component('button-counter',{
        data: function(){   //data必须要return。
            return {
                count:4,
            }
        },
        props:['value'],
        template:'<div><input v-bind:value="value" @input="child"><h1><slot name="header"></slot></h1><slot></slot></div>',
        methods:{
            child: function(event){
                this.$emit('input',event.target.value)
            }
        }
    })
var app = new Vue({
  el:  '#app',
  data: {
     message: 123
  },
})
</script>

插槽的作用域：    slot插槽只能访问父级数据，如下只能访问message访问不到count.

<button-counter v-model="message"><p slot="header">h1标签</p>{{message}}</button-counter>

给插槽设置一个默认值，当引用该组件没有给slot添加值就会使用默认值：也就是后备插槽

 template:'<div><input v-bind:value="value" @input="child"><h1><slot name="header"></slot></h1><slot>我是slot后备内容</slot></div>',

 

作用域插槽：上面作用域已经已经说明slot默认只能访问父级作用域，而不能访问子组件本身，那么怎样才能实现该功能呢？

//子组件应该这样书写

 template:'<div><input v-bind:value="value" @input="child"><h1><slot name="header"></slot></h1><slot v-bind:count="count"></slot></div>',


//父级组件这样书写

 <button-counter v-model="message"><p slot="header">h1标签</p>  
  <template v-slot:default="haha">
    {{haha.count }}    //4
  </template></button-counter>


//这样父级组件中的slot就能访问子组件的count数据了