vue学习-15-组件的 props类型

组件的 props类型

从父组件给子组件通信，子组件不单单可以得到字符串类型，还可以是其它类型；

<div id="app">
    <html-a v-bind:text="message"></html-a>
    <html-a v-bind:text="array"></html-a>
    <html-a v-bind:text="array[2]"></html-a>
    <html-a v-bind:text="object"></html-a>
    <html-a v-bind:text="object.name"></html-a>
    <html-a v-bind:text="flag"></html-a>
    <html-a v-bind:text="!flag"></html-a>
    <html-a v-bind:text="number"></html-a>
    <html-a v-bind:text="message + '|' + number"></html-a>
</div>

//父组件
    const app = new Vue({
        el : '#app',
        data : {
            message : 'Hello, Vue!',
            array : [1, 2, 3, 4, 5,],
            object : {
                name : 'Mr.Lee',
                age : 100,
            },
            flag : true,
            number : 200
        },
        components : {
            'html-a' : {
                data() {
                    return {
                        message : '子组件'
                    }
                },
                template : `
                      <div>{{text}}</div>
                `,
                props : ['text']
            }
        },
    });

多属性绑定

<div id="app">
    <html-a v-bind:parent-object="object" v-bind:parent-array="array"></html-a>
</div>

    //父组件
    const app = new Vue({
        el : '#app',
        data : {
            message : 'Hello, Vue!',
            array : [1, 2, 3, 4, 5,],
            object : {
                name : 'Mr.Lee',
                age : 100,
            },
            flag : true,
            number : 200
        },
        components : {
            'html-a' : {
                data() {
                    return {
                        message : '子组件'
                    }
                },
                template : `
                      <div>
                            <p>{{parentObject}}</p>
                            <p>{{parentArray}}</p>
                            <p>{{parentObject.name}}</p>
                            <p>{{parentArray[2]}}</p>
                      </div>
                `,
                props : ['parentObject', 'parentArray']
            }
        },
    });