一周精通Vue（二）元件通路、插槽、元件作用域、子產品化

元件之間的通路方式

• $children

  父元件通過 this.$children[index]  可以訪以對象的形式問子元件  一般來說index取值會有不穩定性 
             

• $.refs（常用）

  父元件通過 this.$refs.name  name為ref的值 通過給子元件添加ref屬性來擷取自定元件對象 去操作
             

• $.parent

  子元件通過 this.$parent 通路父元件 拿到父元件對象 
             

• $.root

  子元件通過 this.$root方法來通路根元件 即Vue執行個體
             

插槽

• slot 标簽

  表示這個是一個插槽
  基本使用：<slot></solt>
  如果有多個值，同時放入到元件進行替換時 一起作為替換元素           

<div id="app">
    <cpn>
        <!--    插槽指派-->
        <button> 按鈕</button>
    </cpn>
    <!--    預設會将所有内容替換到插槽-->
    <cpn>
        <div>我是div</div>
        <button>新按鈕</button>
    </cpn>
    <!--    執行插槽替換-->
    <cpn>
        <button slot="s1">這個s1插槽的按鈕</button>
    </cpn>

</div>

<template id="my-cpn">
    <div>
        <!--        設定插槽的預設值-->
        <slot>我是一個插槽</slot>
        <!--        如果要使用多個插槽就需要給每個插槽指定name屬性-->
        <slot name="s1">我是一個插槽</slot>
        <slot name="s2">我是一個插槽</slot>

    </div>
</template>

<script>

    const vm = new Vue({
        el: "#app",
        data: {},
        components: {
            cpn: {
                template: '#my-cpn',
                data() {
                    return {name: '子元件'}
                }
            }
        }
    });

</script>           

• 元件的作用域

  在目前模闆内不管引用任何元件 隻要使用到變量 一定是目前模闆所綁定的元件

  每一個模闆之間的作用域是互相隔離的，

  如果想引用子元件的資料就需要進行 template引用

• 作用域插槽

  父元件替換插槽的标簽，但是内容由子元件來提供

  template引用：

  1. 在子元件模闆中使用 來綁定子元件内的資料
  2. 然後在引用處 使用 進行引用子元件插槽對象
  3. 通過 slot.data 擷取子元件的資料對象

子產品化

• 為什麼要用子產品化？

  由于全局變量不同檔案之間的變量互相影響 導緻變量覆寫
             

• ES6的子產品化 導入和導出

// file : a.js
var name = 'tim'
var age = 23
function sum(num1, num2){
    return num1 + num2;
}

// 導出 方式1
export {
    name,
    age,
    sum
}
// 導出 方式2
export var num1 = 100
export var page = 10
// 導出方法
export function sub (n1, n2){
    return n1 - n2
}
// 導出類
export class dog {
  run(){
    console.log('奔跑');  
    }
}
export default sum()
// export default 導出的内容隻有一個 也隻能有一個


// file : b.js
// 導入
import {name, age, num1} from './a.js'
console.log(name);
console.log(age);
console.log(num1);
console.log(sub(num1, age));

// 導入 export default 内容
import sm from './a.js'
sm(1, 2)

// 如果要使用export 和 import
// 就必須要在引入js的時候設定 type='module' 屬性

// 全部導入
import * from './a.js'           

補充

• v-slot

  在vue v2.6.0中，新引入了v-slot指令，他取代了slot和slot-scope這兩個目前已經被廢棄但是為被移除的特性           

// 根元件
<template>
    <div>
        <mo>
            <template v-slot:header="slotProps">
                <h1>{{slotProps.header + ' ' + msg}}</h1>
                
            </template>

            <p>A paragraph for the main content.</p>
            <p>And another one.</p>

            <template v-slot:footer>
                <p>Here's some contact info</p>
            </template>
        </mo>
    </div>
</template>

<script>
    import mo from './module.vue'
    export default {
        components: {
            mo
        },
        data() {
            return {
                msg: '這是根元件的消息'
            }
        }
    }
</script>

// 子元件
<template>
    <div>
        --header start--
        <header>
            <slot name="header" :header="header"></slot>
        </header>
        --header over--
        <div></div>
        --default start--
        <slot></slot>
        --default over--
        <div></div>
        --footer start--
        <footer>
            <slot name="footer"></slot>
        </footer>
        --dooter over--
    </div>
</template>

<script>
    export default {
        data() {
            return {
                header: '來自子元件的頭部消息'
            }
        }
    }
</script>

<style scoped>

</style>
           

1. 元件中可以使用template标簽，加v-slot指令制定具名插槽，當沒有指定插槽name時，預設出口會帶有隐含的名字“default”。
2. 根元件可以利用v-slot:header="slotProps"接受元件中的消息，元件中隻需要在就可以了
3. 如果被提供的内容隻有一個預設插槽時，元件的标簽可以直接被當做插槽的模闆來使用
4. 動态參數也可是使用到插槽當中
5. v-slot的縮寫是#，但是如果使用#的話，必須始終使用具插槽來代替