slot用于定制模板,可以放置一些默认的内容,如果传递了内容则替换掉,如果没有名字的标签默认会放置到default中
<template id="model">
<div>
<slot name="title"></slot>
<slot name="content"></slot>
<slot name="default">这是默认内容</slot>
</div>
</template>
<model><p slot="content">这是内容</p><h1 slot="title">这是标题</h1></model>
ref用于操作dom,也可以用来在父组件中调用子组件方法
<div id="app">
<model ref="changes"></model>
</div>
<script src="js/vue.js"></script>
<script>
let model = {
template:`<div v-show="flag">疯狂加载中</div>`,
data(){
return{
flag:true
}
},
methods:{
hide(){
this.flag = false;
}
}
};
new Vue({
el:"#app",
components:{
model
},
mounted(){
// this.$refs.changes.hide(); //用于父组件调用子组件方法
this.$refs.changes.$el.style.color = "red"; //用于操作dom元素
}
})