Vue组件细节1

标签中is属性，可以规避html5规则的一些错误。

<div id="app">
    <table>
<!--        表格中如果使用tr或类似这种多层包裹的，使用组件代替里面的内容，有可能出现生成的tr在tbody外-->
        <tbody>
            <row></row>
<!--            通过is属性将组件指定好，就可以规避这个问题-->
            <tr is="row"></tr>
        </tbody>
    </table>
</div>
<script src="../js/vue.js"></script>
 
<script>
    // 定义全局组件
    Vue.component('row',{
        template:'<tr>test</tr>'
    });
    var vm = new Vue({
        el:'#app',
    })
</script>

父组件和子组件之间传递参数，子组件对参数进行校验

<div id="app">
    <child content="test"></child>
</div>
<script src="../js/vue.js"></script>
<script>
    Vue.component('child',{
        template:'<div>{{content}}</div>',
        // 父组件向子组件传递数据时，可以进行验证校验
        props:{
            content:{
                // type 父组件向子组件传递的数据类型 列表可以写入多中类型判断
                type: [String,Number],
                // required 是否必须传
                required: true,
                default: '默认参数',
                // 自定义校验规则 value参数是父组件传递进来的参数
                validator:function (value) {
                    return (value.length>5)
                }
 
            }
        }
    });
    var vm = new Vue({
        el:'#app'
    })
</script>

父组件向子组件传值

<div id="app">
    //num2参数使用父组件的data属性
    <number :num2="number2" num3="10"></number>
    {{number2}}<input type="button" value="test" @click="change">
</div>

Vue.component('number',{
        //父组件向子组件传参，存在单向数据流
        props:['num2','num3'],//子组件通过props属性接收父组件的传值
        template:'<div>子组件---<span>{{count}}--{{number3}}</span></div>',
        data:function () {
            return{
                //子组件接收父组件的传值，需要在data中重新定义，保证这个传值父子组件不互相影响，起到隔离作用
                count:this.num2,
                number3:this.num3
            }
        }
    });
    new Vue({
        el:'#app',
        data:{
            number2:99
        },
        methods:{
            change:function () {
                this.number2 = 100
            }
        }
    })

父组件向子组件传值，在子组件中先定义属性在传值

全局组件中通过props以数组方式接收传递的参数

全局组件中，data方法必须在return中将父组件传过来的参数重新定义成子组件的属性，避免父、子组件传值相互不影响，起到隔离作用

因为num2和num3是父组件向子组件的传递参数，所以使用this.xxxx引用