Vue中組件的使用
關注公眾號 資源自由分享 回復 vue 領取整套教程
方式一
1、使用Vue.extend創建組件
var com1 = Vue.extend({ template: '<h3>這是使用 Vue.extend 創建的組件</h3>' // 通過 template 屬性，指定了組件要展示的HTML結構 })
2、使用 Vue.component('組件的名稱', 創建出來的組件模板對象) 注冊組件
Vue.component('myCom1', com1)
注意：如果使用Vue.Component 定義全局組件的時候，組件的名稱使用了駝峰命名，則在引用組件的時候需要吧大寫的駝峰該為小寫的字母，同時，兩個單詞之前，使用 – 鏈接。如果不使用則直接拿名稱來使用即可。
完整示例：
<div id="app"> <!-- 如果要使用組件，直接，把組件的名稱，以 HTML 標簽的形式，引入到頁面中，即可 --> <mycom1></mycom1> </div> <script> // 1.1 使用 Vue.extend 來創建全局的Vue組件 var com1 = Vue.extend({ template: '<h3>這是使用 Vue.extend 創建的組件</h3>' // 通過 template 屬性，指定了組件要展示的HTML結構 }) // 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>
方式二
直接使用Vue.component的方式創建
Vue.component('mycom2', { template: '<div><h3>這是直接使用 Vue.component 創建出來的組件</h3><span>123</span></div>' })
完整示例：
<div id="app"> <!-- 還是使用 標簽形式,引入自己的組件 --> <mycom2></mycom2> </div> <script> Vue.component('mycom2', { template: '<div><h3>這是直接使用 Vue.component 創建出來的組件</h3><span>123</span></div>' }) // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {} }); </script>
方式三
被控制的 #app 外面,使用 template 元素,定義組件的HTML模板結構
<template id="tmpl"> <div> <h1>這是通過 template 元素,在外部定義的組件結構,這個方式,有代碼的只能提示和高亮</h1> <h4>好用,不錯!</h4> </div> </template>
使用id注冊組件
Vue.component('mycom3', {
template: '#tmpl'
})
完整示例
<div id="app"> <mycom3></mycom3> </div> <template id="tmpl"> <div> <h1>這是通過 template 元素,在外部定義的組件結構,這個方式,有代碼的只能提示和高亮</h1> <h4>好用,不錯!</h4> </div> </template>
<script>
Vue.component('mycom3', {
template: '#tmpl'
})
</script>
創建局部組件
局部組件的創建和全局組件的創建方法一樣。唯一區別的是，局部組件是在vue實例中定義的
<div id="app2"> <mycom3></mycom3> <login></login> </div> <!-- 在 被控制的 #app 外面,使用 template 元素,定義組件的HTML模板結構 --> <template id="tmpl2"> <h1>這是私有的 login 組件</h1> </template> <script>var vm2 = new Vue({ el: '#app2', data: {}, methods: {}, filters: {}, directives: {}, components: { // 定義實例內部私有組件的 login: { template: '#tmpl2' } } }) </script>
組件中的data 和 methods：
1、 組件可以擁有自己的數據
2、 組件中的data 和實例中的data 有點不一樣，實例中的data 可以為一個對象。但是組件中的data必須是一個方法
3、 組件中的data除了是一個方法，還必須返回一個對象。
4、 組件中的data 的使用方式和 實例中的data 使用方式一樣
5、 組件中的Methods 的定義和使用與實例中一樣
Vue.component('mycom1', { template: '<h1>這是全局組件 --- {{msg}}</h1>', data: function() { return { msg: '這是組件的中data定義的數據' } } })
父組件向子組件傳值：
1、 父組件通過 屬性綁定（v-bind:） 的形式, 把 需要傳遞給 子組件的數據，以屬性綁定的形式，傳遞到子組件內部，供子組件使用
2、 子組件需要在內部定義props 屬性。例如 props : [ ‘parentmsg’ ] 把父組件傳遞過來的 parentmsg 屬性，先在 props 數組中，定義一下，這樣，才能使用這個數據
3、 所有props 中的數據都是通過 父組件傳遞過來的
<div id="app"> <!-- 父組件，可以在引用子組件的時候， 通過 屬性綁定（v-bind:） 的形式, 把 需要傳遞給 子組件的數據，以屬性綁定的形式，傳遞到子組件內部，供子組件使用 --> <com1 v-bind:parentmsg="msg"></com1> </div> <script> // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: '123 啊-父組件中的數據' }, methods: {}, components: { com1: { data() { // 注意： 子組件中的 data 數據，並不是通過 父組件傳遞過來的，而是子組件自身私有的，比如： 子組件通過 Ajax ，請求回來的數據，都可以放到 data 身上； // data 上的數據，都是可讀可寫的； return { title: '123', content: 'qqq' } }, template: '<h1 @click="change">這是子組件 --- {{ parentmsg }}</h1>', // 注意： 組件中的 所有 props 中的數據，都是通過 父組件傳遞給子組件的 props: ['parentmsg'], // 把父組件傳遞過來的 parentmsg 屬性，先在 props 數組中，定義一下，這樣，才能使用這個數據 directives: {}, filters: {}, components: {}, methods: { change() { this.parentmsg = '被修改了' } } } } }); </script>
子組件向父組件傳值
子組件向父組件傳值是通過方法的方式
<div id="app"> <!-- 父組件向子組件 傳遞 方法，使用的是 事件綁定機制； v-on, 當我們自定義了 一個 事件屬性之后，那么，子組件就能夠，通過某些方式，來調用 傳遞進去的 這個 方法了 --> <com2 @func="show"></com2> </div> <template id="tmpl"> <div> <h1>這是 子組件</h1> <input type="button" value="這是子組件中的按鈕 - 點擊它，觸發 父組件傳遞過來的 func 方法" @click="myclick"> </div> </template> <script> // 定義了一個字面量類型的 組件模板對象 var com2 = { template: '#tmpl', // 通過指定了一個 Id, 表示 說，要去加載 這個指定Id的 template 元素中的內容，當作 組件的HTML結構 data() { return { sonmsg: { name: '小頭兒子', age: 6 } } }, methods: { myclick() { // 當點擊子組件的按鈕的時候，如何 拿到 父組件傳遞過來的 func 方法，並調用這個方法？？？ // emit 英文原意： 是觸發，調用、發射的意思 this.$emit('func', this.sonmsg) } } } // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: { datamsgFormSon: null }, methods: { show(data) { // console.log('調用了父組件身上的 show 方法: --- ' + data) // console.log(data); this.datamsgFormSon = data } }, components: { com2 // com2: com2 } }); </script>