組件

組件系統(tǒng)是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通?？蓮陀玫慕M件構建大型應用。仔細想想，幾乎任意類型的應用界面都可以抽象為一個組件樹

• 創(chuàng)建組件的兩種方式：1 全局組件 2 局部組件

全局組件

• 說明：全局組件在所有的vue實例中都可以使用
• 注意：先初始化根實例再注冊組件
• 注意：組件中的 data 必須是函數(shù)

 <div id="app">
    <!-- 使用自定義元素的方式 -->
    <!-- 使用組件 -->
    <my-component></my-component>
</div>
<!-- 引入vue -->
<script src="./vue.js"></script>
<script>
    // 創(chuàng)建全局組件 不能放在 new Vue 的下面 否者會報錯 
    // 第一個參數(shù)：表示組件名稱
    // 第二個參數(shù)：表示組件的配置對象
    Vue.component('my-component', {
        // 指定組件中展示的HTML內(nèi)容
        // 注意：組件的模版中必須有唯一的根元素，否則，會報錯
        // template: '指定需要展示的內(nèi)容',
        // ES6: 字符串模板 通過 反引號 使用
        template: `
             <div>
                <p>我是全局組件 </P>
                <div v-color>內(nèi)容 --- {{ msg }} --- {{ num }}</div>
                <button @click="fn">組件觸發(fā)事件</button>
              </div>
            `,
        data() {
            return {
                msg: '注意：組件的data必須是一個函數(shù)?。?！',
                num:100
            }
        },
    // 用來設置模板中的事件
        methods:{
            fn(){
                this.num += 1
            }
        },
    // 自定義屬性
        directives:{
            color(el){
                el.style.color='red'
            }
        }
    });
    // 關聯(lián)到頁面中 (組件要渲染的地方)
    var vm = new Vue({
        el: '#app',
        data: {

        }
    })

      // ===> 渲染結果
           請看下面的這張圖片
</script> 

渲染結果.png

局部組件

• 說明：局部組件，是在某一個具體的vue實例中定義的，只能在這個vue實例中使用

 <div id="app">
        <hello></hello>
    </div>
    <script src="./vue.js"></script>
    <script>
        // 創(chuàng)建 vue 實例
        var vm = new Vue({
            el: '#app',
            data: {

            },
            // 創(chuàng)建局部組件
            components: {
                // hello 表示組件名稱
                // 對象表示該組件的配置對象
                hello: {
                    template: ` <h1>局部組件</h1>`
                }
            }

        });

組件通訊

父組件到子組件

• 方式：通過props屬性來傳遞數(shù)據(jù)
• 注意：屬性的值必須在組件中通過props屬性顯示指定，否則，不會生效
• 說明：傳遞過來的props屬性的用法與data屬性的用法相同

 <div id="app">
        <child :msg='parentProp'></child>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                parentProp:'父組建中的屬性'
            },

            // 創(chuàng)建局部組件
            components:{
                // 子組件
                child:{
                    // props 監(jiān)聽父組件傳遞過來的信息
                    props:['msg'],
                    // 傳遞過來后，可在 template 模板里直接引用，就如已經(jīng)傳遞過來數(shù)據(jù)塞到data
                    template:`<h1>{{ msg }}</h1>`
                }
            }
        })
    </script>

子組件到父組件

• 方式：父組件給子組件傳遞一個函數(shù)，由子組件調(diào)用這個函數(shù)

• 說明：借助vue中的自定義事件（v-on:cunstomFn="fn"）
• $emit()：觸發(fā)事件

   <div id="app">
      <h1>父組件: 這是子組件傳遞過來的數(shù)據(jù) -----{{ msg }} </h1>
       <!-- 此處的方法 pfn 就是父組件中提供的屬性 -->
        <child v-on:pfn='parentFn'></child>
    </div>
    <script src="./vue.js"></script>
    <script>
        // 子組件傳遞數(shù)據(jù)給父組件
        // 1 由父組件提供一個方法
        // 2 這個方法需要讓子組件來調(diào)用
        // 3 在子組件中調(diào)用父組件的方法 ，將要傳遞的數(shù)據(jù)作為 父組件方法的參數(shù)
        // 進行傳遞
        var vm = new Vue({
            el: '#app',
            data: {
                msg :''
            },
            methods:{
                parentFn(arg){
                    console.log(arg)
                    this.msg = arg
                }
            },
            // 創(chuàng)建組件
            components : {
               // 子組件
                child :{
                    template :`
                      <button @click="test">子組件傳遞數(shù)據(jù)給父組件</button>`,
                     methods: {
                             // 子組件：通過$emit調(diào)用
                             test(){
                                    this.$emit('pfn','這是數(shù)據(jù)')
                             }
                      }
                }
            }
        })
    </script>

另外的一種情況是當父組件和子組件都有一個獨立的文件時候怎么實現(xiàn)通訊呢？

• 三個步驟：

1.在父組件中引入子組件
    // 導入 numberbox 組件
import NumberBox from '../common/NumberBox.vue'
2.在父組件export default{
   //里面 導入   components: {  NumberBox  }
}
3.在父組件中創(chuàng)建一個    <NumberBox ></NumberBox>標簽，這個標簽用來存放子組件的內(nèi)容

非父子組件通訊

在簡單的場景下，可以使用一個空的 Vue 實例作為事件總線

• $on()：綁定事件

var bus = new Vue()

// 觸發(fā)組件 A 中的事件
bus.$emit('id-selected', 1)

// 在組件 B 創(chuàng)建的鉤子中監(jiān)聽事件
bus.$on('id-selected', function (id) {
  // ...
})

• 示例：組件A ---> 組件B

 <div id="app">
    <comb></comb>

    <coma></coma>
  </div>
  <script src="./vue.js"></script>
  <script>
    // a組件 傳遞數(shù)據(jù)給 b組件
    // 也就是：b組件注冊事件，由a組件觸發(fā)這個事件

    // 創(chuàng)建一個空的Vue實例對象，
    var bus = new Vue()

    var vm = new Vue({
      el: '#app',

      components: {
        // b組件
        comb: {
          template: '<h1>這是 B組件 --- {{ msg }}</h1>',
          data() {
            return {
              msg: ''
            }
          },
          created() {
            // 綁定事件
            bus.$on('fn', (arg) => {
              console.log(arg);
              this.msg = arg
            })
          }
        },

        // a組件
        coma: {
          template: `<button @click="send">A組件的按鈕</button>`,
          methods: {
            send() {
              bus.$emit('fn', '這是a傳遞給b的數(shù)據(jù)')
            }
          }
        }
      }
    })
  </script>