元件的 props

元件的父子關係中，當設定一個獨立元件時，這個元件就是 new Vue()的子元件
當我們需要通過子元件顯示父元件 data 值的時候，需要通過 props 屬性傳值；

<div id="app">
    <html-a abc="world"></html-a>
    <html-a v-bind:abc="message"></html-a>
</div>

    //區域性元件
    const childComponent = {
        data() {
            return {
                message : '區域性元件'
            }
        },
        template : `
              <div>{{abc}} {{message}}</div>
        `,
        props : ['abc']
    };

    //資料物件
    const dataObj = {
        message : 'Hello, Vue!',
    };

    //建立一個Vue物件
    //父元件
    const app = new Vue({
        el : '#app',
        data : dataObj,
        components : {
            'html-a' : childComponent
        },
    });
 

PS: 個人理解就是使用props新建一個子元件的屬性，使用v-bind將父元件的message傳遞給屬性，再在子元件中呼叫屬性

屬性名大小寫

在 JS 操作 HTML 屬性名有一個大小寫的問題：兩個單詞組合，使用如下寫法：

const childComponent = {
    template : `
        <div>{{textTitle}}</div>
    `,
    props : ['textTitle']
};

<div id="app">
    <html-a text-title="world"></html-a>
    <html-a v-bind:text-title="message"></html-a>
</div>
 

全域性元件也是Vue例項的子元件

div id="app">
    <html-a text-title="world"></html-a>
    <html-a v-bind:text-title="message"></html-a>
</div>

    //全域性元件
    Vue.component('html-a', {
        data() {
            return {
                message : '區域性元件'
            }
        },
        template : `
              <div>{{textTitle}} {{message}}</div>
        `,
        props : ['textTitle']
    });

    //資料物件
    const dataObj = {
        message : 'Hello, Vue!',
    };

    //建立一個Vue物件
    //父元件
    const app = new Vue({
        el : '#app',
        data : dataObj,
    });