slot 默认值使用

html 代码部分

Vue.component('adiv', {  
            ... },
  template:
	  `<div>这个黄色区域是模板里的 div元素<br><br> 	  
       <button><slot>用slot的默认值</slot></button>
	   </div>`
})

 vue 代码部分

<div id="div">
<adiv v-bind:style="componStyle" ></adiv> 
</div>

1. 在vue 代码模板中，<button> </button>元素中间使用了 "<slot>用slot的默认值</slot>"

此时网页渲染效果的 button 默认值为  "用slot的默认值"

网页渲染效果： 

 2. 如果父组件为这个插槽提供了内容，则默认的内容会被替换掉。

这里的 html 代码部分，自定义元素之间已经有了默认内容 {{mesg}}。所以<slot> 的默认内容会被替换掉

<div id="div">
<adiv v-bind:style="componStyle" >{{mesg}}</adiv> 
</div>