slot 默认值使用
html 代码部分Vue.component('adiv', {... },template:`<div>这个黄色区域是模板里的 div元素<br><br><button><slot>用slot的默认值</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>
更多推荐
已为社区贡献23条内容
所有评论(0)