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數據了