slot插槽、ref的应用

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元素
        }
    })