文章目录
一 插槽的简单用法
1.1 用处和用法
当自定义组件没有slot
元素的时候,则该标签开始至结束之间的全部内容都会被丢弃。
当使用插槽slot
的时候,插槽内可以包含任意内容,包括HTML
,如:
<div id="app">
<my_div>
input:
<input type="button" value="按钮">
</my_div>
</div>
new Vue({
el: '#app',
components: {
my_div: {
template: `
<div>
<slot></slot>
</div>
`
}
}
})
1.2 编译作用域
重要:VUE的作用域应该好好整理下
插槽不在标签作用域的范围内,比如这里的{
{message}}
就没有用,VUE
会报错
[Vue warn]: Property or method “message” is not defined on the instance but referenced during render.
<div id="app">
<my_div message="你好哇,李银河">
author:{
{message}}{
{author}}
<input @click='display_alert' type="button" value="按钮">
</my_div>
</div>
而定义在VUE
实例中的属性则可以使用(和native html
一样)
new Vue({
el: '#app',
data: {
author: "王小波"
},
methods:{
display_alert:function(){
alert("Dont worry! Be Happy!")
}
},
components: {
my_div: {
props: {
message: {
type: String
}