vue学习笔记（三）
一、組件
（一）什么是組件
組件（Component）是 Vue.js最強大的功能之一。組件可以擴展 HTML元素，封裝可重用的代碼組件是自定義元素（對象）。
（二）創(chuàng)建組件的兩種方式
官方推薦組件標簽名是使用-連接的組合詞，例如：<my-hello></my-hello>。
1、使用構(gòu)造器創(chuàng)建組件
使用這種方式創(chuàng)建組件首先需要使用Vue.extend()創(chuàng)建一個組件構(gòu)造器，然后使用Vue.component(標簽名,組件構(gòu)造器)，根據(jù)組件構(gòu)造器來創(chuàng)建組件。
//1.創(chuàng)建構(gòu)造器 var MyComponent=Vue.extend({template:'<h3>Hello World</h3>' }); //2.創(chuàng)建組件 Vue.component('my-hello',MyComponent);//3.使用組件 <div id="app"><my-hello></my-hello> </div>這種創(chuàng)建組件的方式比較麻煩，使用的較少。
2、直接創(chuàng)建組件
使用Vue.component(標簽名,組件模板)，根據(jù)組件構(gòu)造器來創(chuàng)建組件。
//1.創(chuàng)建組件Vue.component('my-world', {template: '<h2>hello vue.js</h2>'});//2.使用組件 <div id="app"><my-world></my-world> </div>（三）組件的分類
組件分為全局組件和局部組件。
1、全局組件
使用Vue.component()創(chuàng)建的組件都是全局組件。這樣的組件在任何組件內(nèi)都能使用。上面我們創(chuàng)建就是全局組件。
2、局部組件
局部組件一般都是定義在實例的選項中，稱為實例的子組件。相應(yīng)的，實例也被稱為父組件。
//1.定義組件new Vue({el: '#app',components: {dawei: {template: '<h2>my name is dawei</h2>'}} }); //2.使用組件 <div id="app"><dawei></dawei> </div>（四）引用模板
很多時候我們的template模板中需要存放很多標簽內(nèi)容，這樣的話寫起來會很麻煩。這時候我們可以使用template標簽。
用法如下：
<template id="wbs"> //使用template標簽<div><h2>hello {{msg}}</h2><ul><li v-for="value in arr">{{value}}</li></ul></div> </template>new Vue({el: '#app',components: {'my-dawei': {template: '#wbs', //選擇template標簽data() {return {msg: 'vue.js',arr: ["a", "b", "c", "d"]}}}}});這里涉及到的幾個知識點得著重提一下：
- 在template模板中，所有的元素必須放置在一個根元素中，要不然會報錯。例子中我們將元素放置在了<div>標簽中。
- 組件中的data選項必須是一個函數(shù)類型，使用return返回所有的數(shù)據(jù)。
（五）動態(tài)組件
很多時候項目中需要在某一個地方動態(tài)的使用不同的組件，這時候就需要使用動態(tài)組件。
動態(tài)組件的使用需要綁定is屬性：
簡單示例：
//點擊按鈕顯示不同的組件<div id="app"><button type="button" @click="flag='my-a'">顯示a組件</button><button type="button" @click="flag='my-b'">顯示b組件</button><component :is="flag"></component> //傳入flag </div>new Vue({el: '#app',data: {flag: 'my-a' //給flag賦值},components: {'my-a': {template: '<p>我是a組件</p>',},'my-b': {template: '<p>我是b組件</p>'}} });（六）keep-alive組件
使用keep-alive組件緩存非活動組件，可以保留狀態(tài)，避免重新渲染，默認每次都會銷毀非活動組件并重新創(chuàng)建。
使用范例：
<keep-alive><component :is="flag"></component> </keep-alive><div id="app"><button type="button" @click="flag='my-x'">x</button><button type="button" @click="flag='my-y'">y</button><keep-alive><component :is="flag"></component></keep-alive></div>new Vue({el: '#app',data: {flag: 'my-x'},components: {'my-x': {template: '<p>{{x}}</p>',data() {return {x: Math.random()}}},'my-y': {template: '<p>{{y}}</p>',data() {return {y: Math.random()}}}}});這樣的話，第一次產(chǎn)生的隨機數(shù)就會被緩存，再次切換的時候也不會發(fā)生改變。
二、 組件間數(shù)據(jù)傳遞
（一）父子組件
在一個組件內(nèi)部定義另一個組件，那么這對組件稱為父子組件。子組件只能在父組件內(nèi)部使用。默認情況下，每個組件實例的作用域是獨立的，子組件無法訪問父組件中的數(shù)據(jù)，同樣，父組件也無法訪問子組件中的數(shù)據(jù)。
<div id="app"><my-a></my-a><!-- 父組件 --> </div><template id="a"><div><p>{{msg}}</p> <my-b></my-b> <!-- 在父組件中調(diào)用子組件 --></div> </template><template id="b"><div><p>{{mydata}}</p></div> </template><script>new Vue({ //根組件el: '#app',components: { //子組件寫在components選項中"my-a": { //b組件的父組件template: "#a",data() {return {msg: '我是父組件',}},components: { //子組件寫在父組件的components選項中"my-b": {template: "#b",data() {return {mydata: "我是子組件"}}}}}}}); </script>（二）組件間數(shù)據(jù)傳遞（通信）
1、子組件訪問父組件的數(shù)據(jù)
步驟：
- a、調(diào)用子組件時，綁定想要獲取的父組件中的數(shù)據(jù)
- b、在子組件內(nèi)部，使用props選項聲明獲取的數(shù)據(jù)，即接收來自父組件的數(shù)據(jù)
改進上面的例子：
<div id="app"><my-a></my-a> </div><template id="a"><div><p>{{msg}}</p> <p>這是要傳遞給子組件的值：{{myname}}</p><my-b :name="myname"></my-b> <!-- 綁定子組件想要獲取的數(shù)據(jù) --></div> </template><template id="b"><div><p>{{mydata}}</p><p>這是父組件傳遞過來的數(shù)據(jù)：{{name}}</p></div> </template><script>new Vue({el: '#app',data: {},components: {"my-a": {template: "#a",data() {return {msg: '我是a組件',myname: '子組件b你好，我是父組件a'}},components: {"my-b": {template: "#b",data() {return {mydata: "我是b組件"}},props: ["name"] //子組件使用props聲明想要獲取的數(shù)據(jù)}}}}}); </script>2、父組件訪問子組件的數(shù)據(jù)
步驟：
- a 在子組件中使用vm.$emit(事件名,數(shù)據(jù))觸發(fā)一個自定義事件，將數(shù)據(jù)發(fā)送給父組件，事件名自定義
- b 父組件在使用子組件的地方監(jiān)聽子組件觸發(fā)的事件，并在父組件中定義方法，用來獲取數(shù)據(jù)
3、單向數(shù)據(jù)流
props是單向數(shù)據(jù)綁定的，當父組件數(shù)據(jù)發(fā)生變化時，將傳遞給子組件，但是不會反過來。而且不允許子組件直接修改父組件中的數(shù)據(jù)，強制修改會報錯。
解決方案：
- 如果子組件想把它作為局部數(shù)據(jù)來使用，可以將數(shù)據(jù)存入另一個變量中再操作，不影響父組件中的數(shù)據(jù)
- 如果子組件想修改數(shù)據(jù)并且同步更新到父組件，兩個方法：
- 使用.sync顯式地觸發(fā)一個更新事件（1.0版本中支持，2.0版本中不支持，2.3版本又開始支持）
- 可以將父組件中的數(shù)據(jù)包裝成對象，然后在子組件中修改對象的屬性(因為對象是引用類型，指向同一個內(nèi)存空間)，推薦使用這種方式。
4. 非父子組件間的通信
非父子組件間的通信，可以通過一個空的Vue實例作為中央事件總線（事件中心），用它來觸發(fā)事件和監(jiān)聽事件，從而實現(xiàn)非父子組件間的通信。
var Event = new Vue(); //空vue實例methods: { send() { //觸發(fā)emit事件Event.$emit("hello", this.asmsg);}}mounted() { //在子組件的鉤子函數(shù)中監(jiān)聽該事件Event.$on('hello', data => { //獲取值this.bsmsg = data; })}三、slot內(nèi)容分發(fā)
用來獲取組件中的原內(nèi)容
var vm = new Vue({el: '#app',components: {'my-hello': {template: '#hello'}} });<div id="app"><my-hello>hello vue.js</my-hello> </div><template id="hello"><div><slot>如果沒有原內(nèi)容，則顯示該內(nèi)容</slot></div> </template>如果組件標簽中沒有內(nèi)容就會顯示slot中的內(nèi)容，這也就是所謂的單個插槽。
還可以對顯示的內(nèi)容進行分組，這就是具名插槽，可以操作標簽組中的內(nèi)容：
<div id="app"><my-hello><ul slot="s1"><li>aaa</li><li>bbb</li><li>ccc</li></ul><ol slot="s2"><li>111</li><li>222</li><li>333</li></ol></my-hello> </div><template id="hello"><div><slot name="s2"></slot> //為插槽指定名稱 將名為s2的內(nèi)容放置在這里<p>hello vue.js</p><slot name="s1"></slot> //將名為s1的內(nèi)容放置在這里</div> </template>這樣，就可以對組件中的內(nèi)容實時操作。
總結(jié)
以上是生活随笔為你收集整理的vue学习笔记（三）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SVN统一项目管理
- 下一篇： 老男孩Linux运维第41期201710