VUEJS學(xué)習(xí)網(wǎng)址：https://cn.vuejs.org/

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、博州網(wǎng)絡(luò)推廣、小程序定制開發(fā)、博州網(wǎng)絡(luò)營(yíng)銷、博州企業(yè)策劃、博州品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供博州建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：www.chinadenli.net

此文章是用來記錄自己的學(xué)習(xí)和實(shí)踐心得。

關(guān)注點(diǎn)：父子組件之間的通信

看圖說話：

Pass Props

子組件本身與父組件是孤立的，通過子組件中顯示聲明的props屬性，接收父組件數(shù)據(jù);

父組件的數(shù)據(jù)更新時(shí)，子組件的prop會(huì)跟著更新；

此數(shù)據(jù)流動(dòng)是單向的（看著）;

Emit Events

子組件使用$.emit(fn)向外拋出自己的內(nèi)部觸發(fā)的事件;

父組件是否監(jiān)聽？如果父組件需要監(jiān)聽，使用v-on綁定監(jiān)聽，觸發(fā)對(duì)應(yīng)事件;

以上為通用語(yǔ)，具體分析

子組件可以接收一個(gè)字符串，在子組件內(nèi)部可以用{{label}}使用　

<v-input label="姓名"></v-input>

子組件可以接收動(dòng)態(tài)參數(shù)

<input v-model="msg" />
<v-profile :message="msg"></v-profile>

子組件接收到數(shù)據(jù)之后想處理一下不小心改了怎么辦？

給prop創(chuàng)建一個(gè)副本（建議深拷貝），處理副本，不動(dòng)prop;

父組件的數(shù)據(jù)改變后，子組件的prop會(huì)自動(dòng)更新，但是這個(gè)prop的副本不會(huì)啊？

使用watch監(jiān)聽這個(gè)prop，改變時(shí)更新副本;

子組件的prop副本改變了想要通知父組件怎么辦？

使用watch監(jiān)聽這個(gè)副本，改變時(shí)向外拋出自己的內(nèi)部觸發(fā)的事件;
。。。

其實(shí)以上？？？在2.3有了更好的方法，之前的就是看看。

.sync修飾符

***父組件***
<input v-model="msg" />
<v-profile :message.sync="msg"></v-profile>
***子組件***
$.emit('update:message',newValue)

我是用了一下然后喜聞樂見的修改成功了，但是打開控制臺(tái)有報(bào)錯(cuò)！！！

vue.esm.js?65d7:434 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "message"

子組件想要觸發(fā)父組件可以emit(父組件需要監(jiān)聽才會(huì)觸發(fā))，父組件觸發(fā)子組件事件呢？

通過在引用的子組件上使用ref屬性實(shí)現(xiàn)父組件調(diào)用子組件的方法以及屬性

但是！$refs 只在組件渲染完成后才填充，并且它是非響應(yīng)式的。它僅僅作為一個(gè)直接訪問子組件的應(yīng)急方案——應(yīng)當(dāng)避免在模版或計(jì)算屬性中使用 $refs 。

關(guān)注點(diǎn)：非父子組件之間的通信

使用空的vue實(shí)例作為中央事件總線

var bus = new Vue();
// 觸發(fā)組件 A 中的事件
bus.$emit('id-selected', 1)


// 在組件 B 創(chuàng)建的鉤子中監(jiān)聽事件
bus.$on('id-selected', function (id) {
 // ...
})

考慮vuex

關(guān)注點(diǎn)：在組件中使用slot

首先，在父組件中給子組件標(biāo)簽中間放置內(nèi)容是無效的。然后slot出場(chǎng)。

白話版本：

匿名slot:
  slot標(biāo)簽存在與子組件template中；
  子組件在父組件中使用的時(shí)候，子組件標(biāo)簽中的結(jié)構(gòu)會(huì)在編譯后替換子組件的slot標(biāo)簽；
  如果子組件中沒有slot，則父組件中子組件標(biāo)簽中的內(nèi)容會(huì)消失；
具名slot:
  顧名思義，是具有name屬性的slot標(biāo)簽；并有匿名組件的特性（以上）；
  子組件在父組件中使用的時(shí)候，子組件中的結(jié)構(gòu)中會(huì)有某些標(biāo)簽擁有slot屬性并賦值，這些會(huì)在編譯后替換子組件的相應(yīng)slot標(biāo)簽；

一句話解釋：主要的內(nèi)容是寫在父組件中的子組件標(biāo)簽中，編譯后插入子組件的相應(yīng)位置

講真，說到這里我自己都不明白要slot干嘛。

官方講解入口

官方給了個(gè)布局的例子：

<div class="container">
 <header>
  <slot name="header"></slot>
 </header>
 <main>
  <slot></slot>
 </main>
 <footer>
  <slot name="footer"></slot>
 </footer>
</div>

<app-layout>
 <h2 slot="header">這里可能是一個(gè)頁(yè)面標(biāo)題</h2>
 <p>主要內(nèi)容的一個(gè)段落。</p>
 <p>另一個(gè)主要段落。</p>
 <p slot="footer">這里有一些聯(lián)系信息</p>
</app-layout>

但是好像也沒什么好推薦的。（個(gè)人看法）

再想想：

子組件的template中至少有一個(gè)slot標(biāo)簽，slot標(biāo)簽中的內(nèi)容是default content。什么場(chǎng)景能用到呢？我想到了剛剛寫的表格數(shù)據(jù)篩選，當(dāng)時(shí)用的是v-if,v-else。如果改成slot呢。。。

作用域插槽

語(yǔ)法：

<template scope="props">
　　...
</template>

——————這個(gè)官網(wǎng)例子我是好半天才明白

<my-awesome-list :items="items">
 <!-- 作用域插槽也可以是具名的 -->
 <template slot="item" scope="props">
  <li class="my-fancy-item">{{ props.text }}</li>
 </template>
</my-awesome-list>

以上的template中的props其實(shí)和子組件的props屬性是相同的，子組件傳遞了什么prop，它就接收什么，像是下邊的傳了個(gè)text

<ul>
 <slot name="item"
  v-for="item in items"
  :text="item.text">
  <!-- 這里寫入備用內(nèi)容 -->
 </slot>
</ul>

我看了很長(zhǎng)很長(zhǎng)時(shí)間，為什么要這么拐個(gè)彎呢。。。

————一夜過后—————

這樣內(nèi)容更靈活：數(shù)據(jù)是相同的（父組件提供數(shù)據(jù)），子組件負(fù)責(zé)了循環(huán)（添加邏輯），父組件引用子組件時(shí)插入的作用域插槽的模板決定了（展示的形式）！這分工！！！點(diǎn)個(gè)贊！！！

我修改了一下自己的table然后頁(yè)面展示了個(gè)空白。之后發(fā)現(xiàn)問題出在子組件往外傳數(shù)據(jù)的時(shí)候變量名不能用"name"。修改掉。

關(guān)注點(diǎn)：動(dòng)態(tài)組件使用

通過使用保留的 <component> 元素，動(dòng)態(tài)地綁定到它的 is 特性，我們讓多個(gè)組件可以使用同一個(gè)掛載點(diǎn)，并動(dòng)態(tài)切換：很適用于制作Tab類的效果

<component v-bind:is="currentView" ：data1="data1" :data2="data2">
 <!-- 組件在 vm.currentview 變化時(shí)改變！ -->
</component>

在methods屬性中定義一個(gè)函數(shù)修改currentView即可。

視情況可以配合 keep-alive 避免重新渲染

在子組件上放置activate鉤子做切換時(shí)的工作：done() //放到鉤子最后，表示執(zhí)行工作完畢，可以切換組件，配合keep-alive使用，activate鉤子只執(zhí)行一次

子組件接收數(shù)據(jù)和以往相同，只是這一次都寫在了component中，只是如此的話，每個(gè)子組件都需要有這些接口(prop)
暫時(shí)說到這里，突然得回頭看一下react，沒時(shí)間了，回頭會(huì)繼續(xù)。

以上這篇vue2.X組件學(xué)習(xí)心得(新手必看篇)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)頁(yè)題目：vue2.X組件學(xué)習(xí)心得(新手必看篇)
標(biāo)題鏈接：http://www.chinadenli.net/article34/gepcpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站排名、、小程序開發(fā)、商城網(wǎng)站、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)