• 十、Vue3的元件化（二）
  • 1、元件的拆分和巢狀
  • 2、元件的css作用域（vue-loader）
  • 3、元件的通訊

十、Vue3的元件化（二）

1、元件的拆分和巢狀

* 對元件進行拆分，拆分成一個個小的元件
* 再將這些元件組合巢狀在一起，最終形成我們的應用程式

2、元件的css作用域（vue-loader）

<!-- 如果子元件是多個根節點，則子元件的根節點上不會有父元件的data-v- -->
<aaa data-v-aaa>
    <div data-v-aaa></div>
    <bbb data-v-bbb data-v-aaa>
        <div data-v-aaa data-v-bbb></div>
        <ccc data-v-ccc data-v-aaa data-v-bbb>
            <div data-v-aaa data-v-ccc></div>
        </ccc>
    </bbb>
</aaa>

<style scoped>
    div div {}
    /*div div[data-v-aaa] {}*/

    div /deep/ div {}
    /*div[data-v-aaa] div {}*/
</style>
 

3、元件的通訊

• 概念

* 父子元件通訊：
      - 父傳子：通過props屬性
      - 子傳父：通過$emit觸發事件

• props用法

<script>
    export default {
        // props: ["name", "gender", "age"],
        props: {
            name: String,
            gender: [String, Number],
            age: {
                // type可選值：String,Number,Boolean,Array,Object,Date,Function,Symbol
                type: Number,
                required: true,
                /**
                 * 預設值為引用型別，如果default為物件，則會出現多個引用指向同一個物件的問題。
                 * 所以default必須為一個工廠函式，返回一個物件
                 */
                default: 19,
                validator(value) {
                    return !!value
                }
            }
        }
    }
</script>
 

• props命名

HTML中標籤的屬性名大小寫不敏感，瀏覽器會把大寫字元解釋為小寫字元。
所以模板中的屬性名（prop）需要使用短橫線分隔命名（元件名也是這樣）

• 非prop的attribute

* 非prop的attribute：當我們傳遞給一個元件某個屬性，但是該屬性並沒有定義對應的props或者emits時，
  就稱之為非prop的attribute
* attribute繼承：當元件有單個根節點時，非prop的attribute將自動新增到根節點的attribute中
* 當元件有多個根節點時，如果有非prop的attribute（不會新增到根節點的attribute中），會報警告
<template>
    <div>黃婷婷</div>
    <!--  消除警告方式一：顯示繫結  -->
    <div :name="$attrs.name">黃婷婷</div>
</template>

<script>
    export default {
        // 消除警告方式二：禁用attribute繼承
        // inheritAttrs: false,
        mounted() {
            // 通過$attrs來訪問所有的非prop的attribute
            console.log(this.$attrs)
        }
    }
</script>
 

• 自定義事件

<!--
<template>
    <div>父元件</div>
    <div>{{name}}：{{age}}</div>
    <child @emit-handler="emitHandler"></child>
</template>

<script>
    import child from "./components/child"

    export default {
        components: {child},
        data() {
            return {
                name: "",
                age: 0
            }
        },
        methods: {
            emitHandler(name, age) {
                this.name = name
                this.age = age
            }
        }
    }
</script>
-->

<template>
    <button @click="$emit('emitHandler','黃婷婷',18)">事件</button>
</template>

<script>
    export default {
        // 陣列寫法
        emits: ['emitHandler']
        // 物件寫法
        /*emits: {
            emitHandler: (name, age) => {
                return true
            }
        }*/
    }
</script>