vue组件（父子组件传值、非props特性、作用域插槽、动态组件、v-once）

一、组件使用细节点

组件是可复用的 Vue 实例，且带有一个名字。
我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用

• 定义全局组件，data里的data格式

Vue.component('row',{
    data:function(){
        return{
            content:'this is a row'
        }
    },
    template:'<tr><td>{{content}}</td></tr>'
})

• tbody下只支持tr标签 直接使用row组件会有bug，需使用is属性

<table>
    <tbody>
        <tr is="row"></tr>
        <tr is="row"></tr>
        <tr is="row"></tr>
    </tbody>
</table>

• 通过创建引用ref来操作DOM

<div ref='hello' @click="handleClick">
    hello world
</div> 

二、父子组件传值

• 加了：之后为js表达式

• 父组件通过属的形式给子组件传值 子组件通过事件触发的形式传值

• 父组件监听change事件并执行handleChange

<div id="root">

        <counter :count="0" @change="handleChange"></counter>
        <counter :count="1" @change="handleChange"></counter>
        <div>{{totle}}</div>
    </div>

var counter={
    //子组件接收
    props:['count'],
    data:function(){
        return{
        /*子组件不能直接修改父组件传过来的值，可以先用number接收再修改*/
            number: this.count
        }
    },
    template:'<div @click="handleClick">{{number}}</div>',
    methods:{
        handleClick:function(){
            this.number++;
            /*子组件触发change事件*/
            this.$emit('change',1)
        }
    }
}

var vm = new Vue({
    el:"#root",
    data:{
        totle:1
    },
    components:{
        /*父组件接收*/
        counter:counter
    },
    methods:{
        handleChange:function(step){
            this.totle+=step
        }
    }
})

三、给组件绑定原生事件

• click.native修饰符，即可绑定原生事件

<div id="root">
    <child @click.native="handleClick"></child>
</div>

四、组件参数校验与非props特性

• props特性：父组件向子组件传值的时候传递了content，子组件在props里声明了content,content属性不会显示在dom标签里面
• 非props特性：父组件向子组件传递了属性,子组件没有声明接收,子组件里不能使用，dom标签上会显示属性;

Vue.component('child',{
        //
        props:{
            //约束条件，传递的数据类型为String或者Number
            //content:[String,Number]
            content:{
                type:String,
                //必须要传参数
                //requierd:true
                //required:false,
                //如果没有传值，content值默认为default value
                //default:'default value',
                validator:function(value){
                    //value长度大于5
                        return (value.length>5)
                }
            }
        },
        template:'<div>{{content}}</div>'
    })

五、非父子组件传值

<div id="root">
    <child content="Dell"></child>
    <child content="Lee"></child>
</div>

• Bus/总线/发布订阅模式/观察者模式

Vue.prototype.bus=new Vue()

Vue.component('child',{
    data:function(){
        return{
            selfContent:this.content
        }
    },
    props:{
        content:String
    },
    template:'<div @click="handleClick">{{selfContent}}</div>',
    methods:{
        handleClick:function(){
            this.bus.$emit('change',this.selfContent)
        }
    },
    mounted:function(){
        var this_=this
        this.bus.$on('change',function(msg){
            this_.selfContent= msg
        })
    }
})

六、vue中的插槽

<body-content >
<!-- 插槽 -->
<!-- 具名插槽 -->
    <div class='header' slot='header'>header</div>
    <div class='footer' slot='footer'>footer</div>
</body-content>

如果父组件中没有插槽内容，在子组件中使用可以定义默认内容

Vue.component('body-content',{
    template:'<div><slot>默认内容</slot><slot name="header"></slot><div class="content">content</div><slot name="footer"></slot></div>'
})

七、vue的作用域插槽

作用域插槽

<child>
    <template slot-scope="props">
        <h1>{{props.item}}</h1>
    </template>
</child>

Vue.component('child',{
        data:function(){
            return{
                list:[1,2,3,4]
            }
        },
        template:'<div><ul><slot v-for="item of list" :item=item></slot></ul></div>'
    })

八、动态组件与v-once指令

动态组件

<!-- <component :is="type"></component> -->
<child-one v-if="type==='child-one'"></child-one>
<child-two v-if="type==='child-two'"></child-two>
<button @click="handleBtnClick">change</button>

v-once提升性能，使用组件后不回销毁，存入内存，下次可以直接使用，不用再次创建

Vue.component('child-one',{
    template:'<div v-once>child-one</div>'
})

Vue.component('child-two',{
    template:'<div v-once>child-two</div>'
})

var vm = new Vue({
    el:'#root',
    data:{
        type:'child-one'
    },
    methods:{
        handleBtnClick:function(){
            this.type=(this.type==='child-one'?'child-two':'child-one');
        }
    }
})