元件

• 引入元件的方式

  • 1.宣告 app 後再用 app.component 建立

  app.component('my-component', {
  //...
  })

  • 2.import component 後，直接在建立 app 時，放入 components 屬性中。(要用 import 要有執行環境，如 Vue Cli)

    import myComponent from './components/my-component.js';
    
    const app = Vue.createApp({
      components: {
        myComponent
      }
    });
    	
    app.mount('#app');

下方是 Vue 2

• 元件執行模式：一個元件可以分為資料(model)和視圖(view)，資料更新時，視圖也會自動更新。在視圖中又可以綁定一些事件，它們觸發methods裡指定的方法，進一步可以改變資料、更新視圖。

• 元件內的data元素必須是函數，並將資料return為物件格式。

    Vue.component('my-component',{
        template:'<div>{{ message }}</div>',
        data: function(){
            return{
                message: '元件內容'
            }
        }
    })

• 元件有分全域註冊和局部註冊兩種。

    <div id="app">
        <my-component></my-component>
    </div>

    //全域註冊
    <script>
    Vue.component('my-component',{
        template:'<div>這裡是元件的內容</div>'
    })

    var app= new Vue({
        el: '#app'
    })
    </script>

    //局部註冊

    <script>


    var Child={
                template:'<div>局部註冊元件的內容</div>'
            }

    var app= new Vue({
        el: '#app',
        components:{
            'my-component':Child
        }
    })

    </script>

• 元件傳遞資料的方式。

  • 父傳子：props

  • 子傳父：$emit

  • 通用：bus

    • 宣告空的元件

    • 用bus.$emit()傳入

    • 用bus.$on()取值

  • 直接取得父元件(元件間會產生依賴)：$parent

  • 直接取得子元件(元件間會產生依賴)：$refs

    用ref定位，再用$refs取值

• slot(將靜態範本的內容分發給元件中的slot)

  • 單一slot：可無名稱。

  • 具名slot：命名後可分發多個slot。

  • 作用域slot：反向將slot內的資訊文字動態產生在靜態範本內，使靜態的範本內有可變動的資料。

  • 存取slot：mounted後用$slots

• 其它

動態元件：使用is特性來選擇要掛載的元件

    <component :is="currentView"></component>

$nextTick：因為Vue在更新data後，不是即時更新DOM，而是使用佇列緩衝所有的資料改變。所以$nextTick就是用來知道什麼時候DOM更新完成，然後再執行其後的程式。

    this.$nextTick(function(){
        var text=document.getElementById('div').innerHTML;
        console.log(text);
    })

X-Templates：一種在HTML中，定義template的方式，不用考慮換行的問題。

    <div id="app">
        <my-component></my-component>
        <!--下方用來代替template-->
        <script type="text/x-template" id="my-component">
            <div>這是元件的內容</div>
        </script>

    </div>

    <script>
        Vue.component('my-component',{
            template:'#my-component'
        })
    </script>