2020.7.13：Vue全域性元件的三種建立方式、Vue私有元件
阿新 • • 發佈：2020-07-13
# 今日學習內容
##Vue 全域性元件的三種建立方式
<body> <div id="app"> <!-- 如果要使用元件，直接把元件的名稱，以 HTML 標籤的形式，引入到頁面中，即可 --> <mycom1></mycom1> </div> <script> // 1.1 使用 Vue.extend 來建立全域性的 Vue 元件 // var com1 = Vue.extend({ // template: '<h3>這是使用 Vue.extend 建立的元件</h3>' // 通過 template 屬性，指定了元件要展示的 HTML 結構第一種：Vue.component('mycom1',Vue.extend({}))// }) // 1.2 使用 Vue.component('元件的名稱',創建出來的元件模板物件) // Vue.component('myCom1', com1); // 如果使用 Vue.component 定義全域性元件的時候，元件名稱使用了 駝峰命名，則在引用元件的時候，需要把 大寫的駝峰改成小寫的字母，同時 兩個單詞之間 使用 - 連線 // 如果不使用駝峰，則直接拿名稱來使用即可 // Vue.component('mycom1', com1); // Vue.component 第一個引數：元件的名稱，將來在引用元件的時候，就是以 標籤形式 來引入它的// 第二個引數：Vue.extend 建立的元件，其中 template 就是 元件將來要展示的 HTML 內容 Vue.component('mycom1', Vue.extend({ template: '<h3>這是使用 Vue.extend 建立的元件</h3>' })); // 建立 Vue 例項，得到 ViewModel var vm = new Vue({ el: "#app", data: { }, methods: { }, })</script> </body>
<body> <div id="app"> <!-- 還是使用 標籤形式 ，引入自己的元件 --> <mycom2></mycom2> </div> <script> // 無論是哪種方式創建出來的元件，元件的 template 屬性指向的模板內容，必須有且只有唯一的一個根元素 Vue.component('mycom2', { template: '<div><h3>這是直接使用 Vue.component 創建出來的元件</h3><span>123</span></div>' }) // 建立 Vue 例項，得到 ViewModel var vm = new Vue({ el: "#app", data: { }, methods: { }, }) </script> </body>第二種：Vue.component('mycom1',{template:'模板字串'})
<body> <div id="app"> <mycom3></mycom3> </div> <!-- 在被控制的 #app 外面，使用 template 元素，定義元件的 HTML 模板結構 --> <template id="tmpl"> <div> <h1>這是通過 template 元素，在外部定義的元件結構，這個方式，有程式碼的只能提示和高亮</h1> <h4>好用，不錯！</h4> </div> </template> <script> Vue.component('mycom3', { template: '#tmpl' }) // 建立 Vue 例項，得到 ViewModel var vm = new Vue({ el: "#app", data: { }, methods: { }, }) </script> </body>第三種：Vue.component('mycom1',{template:`#template標籤的id`)
## Vue 私有元件
<body> <div id="app"> <mycom3></mycom3> </div> <div id="app2"> <mycom3></mycom3> <login></login> </div> <!-- 在被控制的 #app 外面，使用 template 元素，定義元件的 HTML 模板結構 --> <template id="tmpl"> <div> <h1>這是通過 template 元素，在外部定義的元件結構，這個方式，有程式碼的只能提示和高亮</h1> <h4>好用，不錯！</h4> </div> </template> <template id="tmpl2"> <div> <h1>這是私有的 login 元件</h1> </div> </template> <script> Vue.component('mycom3', { template: '#tmpl' }) // 建立 Vue 例項，得到 ViewModel var vm = new Vue({ el: "#app", data: { }, methods: { }, }) var vm2 = new Vue({ el: '#app2', data: {}, methods: {}, filters: {}, directives: {}, components: { // 定義例項內部私有元件的 login: { template: '#tmpl2' } }, beforeCreate() { }, created() { }, beforeMount() { }, mounted() { }, beforeUpdate() { }, updated() { }, beforeDestroy() { }, destroyed() { }, }) </script> </body>Vue 私有元件例項：通過 new Vue 裡面的 components 定義
## Vue 元件中的data和methods
<body> <div id="app"> <mycom1></mycom1> </div> <script> // 1. 元件可以有自己的 data 資料 // 2. 元件的 data 和 例項的 data 有點不一樣，例項中的 data 可以為一個物件，但是元件中的 data 必須是一個方法 // 3. 元件中的 data 除了必須為一個方法之外，這個方法內部，還必須返回一個物件才行 // 4. 元件中中 data 資料 使用方式 和例項中 data 使用方式完全一樣 Vue.component('mycom1', { template: '<h1>這是全域性元件 --- {{msg}}</h1>', data() { return { msg: '這是元件中的data定義的資料' } }, }) // 建立 Vue 例項，得到 ViewModel var vm = new Vue({ el: "#app", data: { }, methods: { }, }) </script> </body>Vue 元件中的data和methods 定義與範例
通過 return 私有化 msg <body> <div id="app"> <counter></counter> <hr> <counter></counter> <hr> <counter></counter> <hr> </div> <template id="tmpl"> <div> <input type="button" value="+1" @click="increment"> <h3>{{count}}</h3> </div> </template> <script> var dataObj = { count: 0 }; // 這是一個計數器的元件，身上有個按鈕，每當點選按鈕，讓 data 中的 count 值 +1 Vue.component('counter', { template: '#tmpl', data() { // return dataObj; return { count: 0 }; }, methods: { increment() { this.count++; } }, }) // 建立 Vue 例項，得到 ViewModel var vm = new Vue({ el: "#app", data: { }, methods: { }, }) </script> </body>Vue 元件中 data return物件的原因
## Vue 元件切換方式
<body> <div id="app"> <a href="" @click.prevent="flag=true">登入</a> <a href="" @click.prevent="flag=false">註冊</a> <login v-if="flag"></login> <register v-else="flag"></register> </div> <script> Vue.component('login', { template: '<h3>登入元件</h3>' }); Vue.component('register', { template: '<h3>註冊元件</h3>' }); // 建立 Vue 例項，得到 ViewModel var vm = new Vue({ el: "#app", data: { flag: false, }, methods: { }, }) </script> </body>第一種：通過 元件的 v-if 和 v-else