這麼定義Vue組件你就贏了

本文標識 : V00011

本文編輯 : Jack 風 編程工具 : Vscode 閱讀時長 : 4分鐘

定義Vue組件

什麼是組件：組件的出現，就是為了拆分Vue實例的程式碼量的，能夠讓我們以不同的組件，來劃分不同的功能模組，將來我們需要什麼樣的功能，就可以去調用對應的組件即可；組件化和模組化的不同：

組件解析：

  • 模組化：是從程式碼邏輯的角度進行劃分的；方便程式碼分層開發，保證每個功能模組的職能單一；
  • 組件化：是從UI介面的角度進行劃分的；前端的組件化，方便UI組件的重用；

全局組件定義的三種方式

1、使用 Vue.extend 配合 Vue.component 方法：

 var login = Vue.extend({        template: '<h1>登錄</h1>'      });      Vue.component('login', login);

2、直接使用 Vue.component 方法：

 Vue.component('register', {        template: '<h1>註冊</h1>'      });

3、將模板字元串，定義到script標籤種：

 <script id="tmpl" type="x-template">        <div><a href="#">登錄</a> | <a href="#">註冊</a></div>      </script>

同時，需要使用 Vue.component 來定義組件：

 Vue.component('account', {        template: '#tmpl'      });

注意：組件中的DOM結構，有且只能有唯一的根元素（Root Element）來進行包裹！

組件中展示數據和響應事件

1、在組件中，data需要被定義為一個方法，例如：

 Vue.component('account', {        template: '#tmpl',        data() {          return {            msg: '大家好，感謝大家關注A2Data！'          }        },        methods:{          login(){            alert('點擊了登錄按鈕');          }        }      });

2、在子組件中，如果將模板字元串，定義到了script標籤中，那麼，要訪問子組件身上的data屬性中的值，需要使用this來訪問

【重點】為什麼組件中的data屬性必須定義為一個方法並返回一個對象通過計數器案例演示

1、使用components屬性定義局部子組件組件實例定義方式：

 <script>      // 創建 Vue 實例，得到 ViewModel// 感謝關注本公號，我們一直在努力。      var vm = new Vue({        el: '#app',        data: {},        methods: {},        components: { // 定義子組件          account: { // account 組件            template: '<div><h1>這是Account組件{{name}}</h1><login></login></div>', // 在這裡使用定義的子組件            components: { // 定義子組件的子組件              login: { // login 組件                template: "<h3>這是登錄組件</h3>"              }            }          }        }      });    </script>

2、引用組件：

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

Tags:

VirMach 便宜 VPS