一、數據傳遞方法

1. 前面幾篇提到的 Vuex
2. props
   • 適用於父組件傳給子組件
   • 配置方式

       // component 標籤設定屬性傳遞資料給子組件
       <test productname="xxx" />
   
       // 子組件需配置 props 
       // 第一種配置方式: 單純接收值
       props: ['productname']
   
       // 第二種配置方式: 限制接收類型
       props: {
           name:String
       }
   
       // 第三種方式: 限制類型、必要性、指定默認值
       porps: {
           name: {
               type:String,
               required:true,
               default: '無名稱'
           }
       }
   
   

3. 全局事件總線
   • 適用於組件之間傳遞數據
   • 主要是利用 Vue 特性, 當生成一個組件實例時, 其隱性 prototype 會指向 Vue 的 prototype, 所以可以取的 Vue 原型的屬性, 通常設定成 $bus

       // 在 new Vue 時設定 Vue prototype 全局事件屬性
       new Vue({
           beforeCreate() {
               Vue.prototype.$bus = this
           }
       })
   
       // 接受數據: 在想接受數據的組件綁定事件回調
       methods(){
           getproduct(data) {......}
       },
       monunted() {
           this.$bus.$on('xxx', this.getproduct)
       },
       beforeDestroy() {
           // 在註銷組件前解除綁定事件
           this.$bus.$off('xxx')
       }
   
       // 提供數據: 觸發綁定的事件
       this.$bus.$on('xxx', this.product)
   

二、ref 屬性

• 在一般 html 標籤或是組件上配置 ref 屬性, 可以用 this.$refs.{配置的名稱} 來取得元素

三、mixin

• 將多個組件共同的資料或是 function 配置到 mixin, 提供共用

1. 配置 mixin

    // 建立一個 mixin.js 檔案
    export const product = {
        methods:{
            showName(){
                // 呼叫時顯示組件 data name 的值
                console.log(this.name)
            }
        },
        mounted() {
            console.log('您好啊!')
        }
    }
    
    export const user = {
        methods:{
            showUserName(){
                console.log(this.username)
            }
        }
    }
    
    // 使用 use 方法引入
    Vue.mixin(xxx)

四、插件

• 一個物件含有一個 install 方法, 會接受兩個參數, 第一個為 Vue, 第二個以後的參數是插件使用時傳遞進來
• 增強 Vue 功能

    productPlugins.install = function (Vue, options) {
        // 1. 設定全局的過濾
        Vue.filter(....)

        // 2. 設定全局的 mixin
        Vue.mixin(....)

        // ... 其他配置
    }
    
    // 在 new Vue 前引入並使用 use 方法
    import productPlugins from './productPlugins'
    Vue.use(productPlugins, ... 其他參數)

五、插槽

1. 預設插槽

    // 父組件
    // 在組件標籤內給內容
    <Product>
        <div>html 內容</div>
    </Product>
    
    // 在子組件內使用 slot 標籤引用內容
    <template>
        <div>           
           <slot>取得父祖件設定的內容</slot>
        </div>
    </template>

2. 具名插槽: 可以設定多個 slot

    // 父組件
    // 在組件標籤內給內容
    <Product>
        <template slot="center">
          <div>html 內容 1</div>
        </template>

        <template v-slot:footer>
           <div>html 內容 2</div>
        </template>
    </Product>
    
    // 在子組件內使用 slot 標籤引用內容
    <template>
        <div>           
           <div>
               <!-- 使用 name 屬性取得對應的內容 -->
               <slot name="center"></slot>
               <slot name="footer"></slot>
            </div>
        </div>
    </template>

3. 作用域插槽: 數據在子組件中, 使用者可以在父子件決定資料呈現的方式

    // 父組件
    // 在組件標籤內給內容
    <Product>
        <template scope="scopeData">
            <!-- 使用 ul 顯示資料 -->
            <ul>
                <li v-for="g in scopeData.products" :key="g">{{g}}</li>
            </ul>
        </template>
    </Product>

    <Product>
        <template slot-scope="scopeData">
            <!-- 使用 h4 標籤顯示資料 -->
            <h4 v-for="g in scopeData.products" :key="g">{{g}}</h4>
        </template>
    </Product>
    
    // 在子組件內使用 slot 標籤引用內容
    <template>
        <div>
            <slot :games="games"></slot>
        </div>
    </template>
    <script>
        export default {
            name:'Product',
            data() {
                return {
                    // 資料由子組件提供
                    games:['商品1','商品2','商品3','商品4']
                }
            },
        }
    </script>