vue.js 學習記錄(二)
阿新 • • 發佈：2017-06-14
分離 理解 foo 選項 這也 lsp 生效 html標簽 tro
3. 使用
4. 組件應該掛載到某個Vue實例下，否則它不會生效。
原文連接：http://www.cnblogs.com/keepfool/p/5625583.html
組件
#註冊組件
Vue.component(‘my-component‘, { // 選項 })
組件在註冊之後，便可以在父實例的模塊中以自定義元素 <my-component></my-component> 的形式使用。要確保在初始化根實例 之前 註冊了組件：
<!DOCTYPE html> <html> <body> <div id="app"> <!-- 3. #app是Vue實例掛載的元素，應該在掛載元素範圍內使用組件--> <my-component></my-component> </div> </body> <script src="vue.min.js"></script> <script> // 1.創建一個組件構造器 var myComponent = Vue.extend({ template: ‘<div>This is my first component!</div>‘ }) // 2.註冊組件，並指定組件的標簽，組件的HTML標簽為<my-component> Vue.component(‘my-component‘, myComponent) new Vue({ el: ‘#app‘ }); </script> </html>
1. Vue.extend()是Vue構造器的擴展，調用Vue.extend()創建的是一個組件構造器。
2. Vue.extend()
template屬性用於定義組件要渲染的HTML。 3. 使用
Vue.component()註冊組件時，需要提供2個參數，第1個參數時組件的標簽，第2個參數是組件構造器。 4. 組件應該掛載到某個Vue實例下，否則它不會生效。
請註意第4點，以下代碼在3個地方使用了<my-component>標簽，但只有#app1和#app2下的<my-component>標簽才起到作用。
<!DOCTYPE html> <html> <body> <div id="app1"> <my-component></my-component> </div> <div id="app2"> <my-component></my-component> </div> <!--該組件不會被渲染--> <my-component></my-component> </body> <script src="js/vue.js"></script> <script> var myComponent = Vue.extend({ template: ‘<div>This is a component!</div>‘ }) Vue.component(‘my-component‘, myComponent) var app1 = new Vue({ el: ‘#app1‘ }); var app2 = new Vue({ el: ‘#app2‘ }) </script> </html>
調用Vue.component()註冊組件時，組件的註冊是全局的，這意味著該組件可以在任意Vue示例下使用。
如果不需要全局註冊，或者是讓組件使用在其它組件內，可以用選項對象的components屬性實現局部註冊。
上面的示例可以改為局部註冊的方式：
<!DOCTYPE html> <html> <body> <div id="app"> <!-- 3. my-component只能在#app下使用--> <my-component></my-component> </div> </body> <script src="js/vue.js"></script> <script> // 1.創建一個組件構造器 var myComponent = Vue.extend({ template: ‘<div>This is my first component!</div>‘ }) new Vue({ el: ‘#app‘, components: { // 2. 將myComponent組件註冊到Vue實例下 ‘my-component‘ : myComponent } }); </script> </html>
父組件和子組件
我們可以在組件中定義並使用其他組件，這就構成了父子組件的關系。
<!DOCTYPE html> <html> <body> <div id="app"> <parent-component> </parent-component> </div> </body> <script src="js/vue.js"></script> <script> var Child = Vue.extend({ template: ‘<p>This is a child component!</p>‘ }) var Parent = Vue.extend({ // 在Parent組件內使用<child-component>標簽 template :‘<p>This is a Parent component</p><child-component></child-component>‘, components: { // 局部註冊Child組件，該組件只能在Parent組件內使用 ‘child-component‘: Child } }) // 全局註冊Parent組件 Vue.component(‘parent-component‘, Parent) new Vue({ el: ‘#app‘ }) </script> </html>
我們分幾個步驟來理解這段代碼：
var Child = Vue.extend(...)定義一了個Child組件構造器var Parent = Vue.extend(...)定義一個Parent組件構造器components: { ‘child-component‘: Child }，將Child組件註冊到Parent組件，並將Child組件的標簽設置為child-component。template :‘<p>This is a Parent component</p><child-component></child-component>‘，在Parent組件內以標簽的形式使用Child組件。Vue.component(‘parent-component‘, Parent)全局註冊Parent組件- 在頁面中使用<parent-component>標簽渲染Parent組件的內容，同時Child組件的內容也被渲染出來
#簡化註冊組件
使用Vue.component()直接創建和註冊組件： // 全局註冊，my-component1是標簽名稱 Vue.component(‘my-component1‘,{ template: ‘<div>This is the first component!</div>‘ }) var vm1 = new Vue({ el: ‘#app1‘ })
在選項對象的components屬性中實現局部註冊： var vm2 = new Vue({ el: ‘#app2‘, components: { // 局部註冊，my-component2是標簽名稱 ‘my-component2‘: { template: ‘<div>This is the second component!</div>‘ }, // 局部註冊，my-component3是標簽名稱 ‘my-component3‘: { template: ‘<div>This is the third component!</div>‘ } } })
#使用script或template標簽
盡管語法糖簡化了組件註冊，但在template選項中拼接HTML元素比較麻煩，這也導致了HTML和JavaScript的高耦合性。
慶幸的是，Vue.js提供了兩種方式將定義在JavaScript中的HTML模板分離出來。
<!DOCTYPE html> <html> <body> <div id="app"> <my-component></my-component> </div> <script type="text/x-template" id="myComponent"> <div>This is a component!</div> </script> </body> <script src="js/vue.js"></script> <script> Vue.component(‘my-component‘,{ template: ‘#myComponent‘ }) new Vue({ el: ‘#app‘ }) </script> </html>
template選項現在不再是HTML元素，而是一個id，Vue.js根據這個id查找對應的元素，然後將這個元素內的HTML作為模板進行編譯。
使用<script>標簽時，type指定為text/x-template，意在告訴瀏覽器這不是一段js腳本
如果使用<template>標簽，則不需要指定type屬性。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <my-component></my-component> </div> <template id="myComponent"> <div>This is a component!</div> </template> </body> <script src="js/vue.js"></script> <script> Vue.component(‘my-component‘,{ template: ‘#myComponent‘ }) new Vue({ el: ‘#app‘ }) </script> </html>
#使用props
組件實例的作用域是孤立的。這意味著不能並且不應該在子組件的模板內直接引用父組件的數據。可以使用 props 把數據傳給子組件。
<!DOCTYPE html> <html> <body> <div id="app"> <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component> </div> <template id="myComponent"> <table> <tr> <th colspan="2"> 子組件數據 </th> </tr> <tr> <td>my name</td> <td>{{ myName }}</td> </tr> <tr> <td>my age</td> <td>{{ myAge }}</td> </tr> </table> </template> </body> <script src="vue.min.js"></script> <script> var vm = new Vue({ el: ‘#app‘, data: { name: ‘keepfool‘, age: 28 }, components: { ‘my-component‘: { template: ‘#myComponent‘, props: [‘myName‘, ‘myAge‘] } } }) </script> </html>
#prop 綁定類型
單項綁定
<!DOCTYPE html> <html> <body> <div id="app"> <table> <tr> <th colspan="3">父組件數據</td> </tr> <tr> <td>name</td> <td>{{ name }}</td> <td><input type="text" v-model="name" /></td> </tr> <tr> <td>age</td> <td>{{ age }}</td> <td><input type="text" v-model="age" /></td> </tr> </table> <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component> </div> <template id="myComponent"> <table> <tr> <th colspan="3">子組件數據</td> </tr> <tr> <td>my name</td> <td>{{ myName }}</td> <td><input type="text" v-model="myName" /></td> </tr> <tr> <td>my age</td> <td>{{ myAge }}</td> <td><input type="text" v-model="myAge" /></td> </tr> </table> </template> </body> <script src="vue.min.js"></script> <script> var vm = new Vue({ el: ‘#app‘, data: { name: ‘keepfool‘, age: 28 }, components: { ‘my-component‘: { template: ‘#myComponent‘, props: [‘myName‘, ‘myAge‘] } } }) </script> </html>
修改了子組件的數據，沒有影響父組件的數據。
修改了父組件的數據，同時影響了子組件。
prop默認是單向綁定：當父組件的屬性變化時，將傳導給子組件，但是反過來不會。這是為了防止子組件無意修改了父組件的狀態
vue.js 學習記錄(二)