Vue全家桶之組件化開發

做者 | Jeskson

掘金 | https://juejin.im/user/5a16e1...

學習組件化開發，首先掌握組件化的開發思想，組件的註冊方式，組件間的數據交互方式，組件插槽的用法，vue調式工具的用法，組件的方式來實現業務邏輯功能。

組件化開發思想，組件註冊，組件調式，組件間的數據交互，組件插槽

組件化規範，就是多的可能性重用

全局組件註冊語法

Vue.component(組件名稱, {
 data: 組件數據,
 template: 組件模板內容
})

// 定義一個名爲button-counter的新組件
Vue.component('button-counter', {
 data: function() {
  return {
   count: 0
  }
 },
 template: '<button v-on:click="count++">點擊了{{count}}次</button>
})

組件的用法

<div id="app">
 <button-counter></button-counter>
</div>

<button-counter><button-counter>
<button-counter><button-counter>

Vue.component('button-counter', {
 data: function() {
  return {
   count: 0
  }
 },
 template: '<button @click="handle">點擊了{{count}}</button>'
 methods: {
  handle: function(){
   this.count += 2;
  }
 }
})
var vm = new Vue({
 el: '#app',
 data: {
 }
});

組件註冊時

data必須是一個函數，組件模板內容必須是單個跟元素

template: `
 <div>
  <button @click="handle">點擊{{count}}次</button>
  <button>da</button>
 </div>
`,

組件命名方式

// 短橫線方式
Vue.component('my-component',{/*...*/})

// 駝峯方式
Vue.component('MyComponent',{/*...*/}}

局部組件註冊

var ComponentA = { /*...*/ }
var ComponentB = { /*...*/ }
var ComponentC = { /*...*/ }

new Vue({
 el: '#app',
 components: {
  'component-a': ComponentA,
  'component-b': ComponentB,
  'component-c': ComponentC,
 }
})

vue調式工具的用法

Make sure you are using Node 6+ and NPM 3+

• Clone this repo
• npm install (Or yarn install if you are using yarn as the package manager)
• npm run bulid
• Open Chrome extension page
• Check 'developer mode'
• Click "load unpacked extension", and choose shells/chrome.

Hacking

• Clone this repo
• npm install
• npm run dev
• A plain shell with a test app will be available at localhost: 8100.

調式工具的安裝

第一步，克隆倉庫，第二步，安裝依賴包，第三步，構建，第四步，打開Chrome擴展頁面，第五步，選中開發者模式，第六步，加載已解壓的擴展，選擇shells/chrome。

組件間數據交互

父組件向子組件傳值

組件內部經過props接收傳遞過來的值

Vue.component('dada-item', {
 props: ['title'], // 用於接收父組件接收過來的數據
 template: '<div>{{title}}</div>'
})

父組件經過屬性的方式將值傳遞給子組件

<dada-item title="來自父組件的數據"></dada-item>
// 靜態

<dada-item :title="title"></dada-item>
// 動態的進行屬性的綁定

代碼示例：

<dada-item title="來自父組件的值"></dada-item>
<dada-item :title="ptitle"></dada-item>

//父組件向子組件傳遞值
Vue.component('dada-item', {
 // 子組件接收父組件
 // title屬性
 props: ['title'],
 data: function() {
  return {
   msg: '子組件的數據'
  }
 },
 template: '<div>{{msg+ "..." + title}}</div>'
});
var vm = new Vue({
 el: '#app',
 data: {
  pmsg: '父組件中內容',
  ptitle: '動態',
 }
});

props屬性名的規則

在props中使用駝峯的形式，則在模板中須要使用短橫線的形式

字符串形式的模板中沒有這個限制

Vue.component('dada-item', {
 // 在JavaScript中駝峯式的
 props: ['daTitle'],
 template: '<div>{{title}}</div>'
})

// 在html中是短橫線方式的
<dada-item da-title="dada"><dada-item>

<div id="app">
 <div>{{pmsg}}</div>
 <menu-item :menu-title="ptitle"></menu-item>
 </div>
</div>

// 父組件向子組件傳值-屬性名
Vue.component('third-com', {
 props: ['testTitle'],
 template: '<div>{{testTitle}}</div>'
});
Vue.component('menu-item', {
 props:['menuTitle'],
 template: '<div>{{menuTitle}}<third-com testTit="hello"></third-com></div>'
});

props屬性值的類型

字符串類型 string
數值類型 number
布爾值類型 boolean
數組類型 array
對象 object

// 字符串形式
<div id="app">
 <div>{{pmsg}}</div>
 <menu-item :pstr="pstr"></menu-item>
</div>

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 父組件向子組件傳遞-props屬性名類型
Vue.component('menu-item',{
 props: ['pstr'],
 template: `
 <div>
 <div>{{pstr}}</div>
 </div>
 `
});
var vm = new Vue({
el: '#app',
data: {
 msg: "父組件內容",
 pstr: 'hello'
 }
});
</script>

// 數字傳值
<dada-item :pstr='pstr' :pN='11'></dada-item>

// 父組件向子組件傳值-props屬性名類型

Vue.component('dada-item', {
 props: ['pstr', 'pN'],
 template: `
 <div>
  <div>{{pstr}}</div>
  <div>{{pN}}</div>
 </div>
`
});
 var vm = new Vue({
  el: '#app',
  data: {
   pmsg: '父組件'
   pstr: 'dada'
  }
 });

子組件向父組件傳值

<dada-item :parr="parr"></dada-item>

// 子組件向父組件傳值
Vue.component('dada-item', {
 props: ['parr'],
 template: `
 <div>
  <ul>
   <li :key="index" v-for="(item,index) in parr">
   {{item}}
   </li>
  </ul>
  <button @click='parr.push("dada")'>點擊</button>
 </div>
 `
 });
 var vm = new Vue({
  el: '#app',
  data: {
   pmsg: '父組件',
   parr: ['da1','da2','da3']
  }
 }];

子組件向父組件傳值,子組件經過自定義事件向父組件傳遞信息

<button v-on:click='$emit("事件名", 值)'>dada</button>

父組件監聽子組件事件

<dada-item v-on:事件名='size += 1'><dada-item>

非父子組件傳值

兄弟組件之間的交互

var event = new Vue()

事件中心

監聽事件和事件的銷燬

event.$on('自定義事件的名稱',事件函數)
監聽事件，第一個參數，自定義監聽事件的名稱，第二個爲事件函數

event.$off('自定義事件的名稱')
// 銷燬事件

觸發事件
event.$emit('自定義事件的名稱', id)

mounted: function() {
 // 監聽事件
 eventhub.$on('da1', (val)=>{
  this.num += val;
 });
}

mounted: function() {
 // 監聽事件
 eventhub.$on('da2', (val)=>{
  this.num += val;
 });
}

組件插槽

父組件向子組件傳遞數據，父組件傳給子組件

// 父組件
<dada-item> dada </dada-item>
這裏的dada 沒有插槽是顯示不了的

// 子組件
插槽
<slot></slot>

插槽的位置位於子組件的模板中

// 插槽的位置
Vue.component('dada-box', {
 template: `
 <div class="dada-item'>
  <div>da</div>
  <slot></slot>//顯示的位置
 </div>
 `
})

// 顯示內容，插槽
<dada-box> dada hello </dada-box>

重點，具名插槽用法，有名字的插槽

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

插槽內容

<dada-layout>
 <h1 slot="header"> 標題</h1>
 <p>你讓開，達達來了</p>
 <h1 slot="footer"> 底部</h1>
</dada-layout>

<template slot="header">
<p>標題1</p>
<p>標題2</p>
</template>
// 放置更多內容

做用域插槽

<dada-list :list="list"></dada-list>

Vue.component('dada-list', {
 props: ['list'],
 template: `
 <div>
 <li :key='item.id' v-for="item in list>{{item.name}}</li>
 </div>
 `
});

var vm = new Vue({
 el: '#app',
 data: {
  list: [{
   id:1,
   name: 'dada'
  },{
  ...
  }
  ]
 }

插槽的定義，子組件中

<ul>
<li v-for="item in list" v-bind:key="item.id">
<slot v-bind:item="item">
 {{item.name}}
</slot>
</li>
</ul>

// 插槽內容
<dada-list v-bind:list="ist">
<template slot-scope="slotProps">

</template>
</dada-list>

<div id="app">
<dada-list :list="list">
 <template slot-scope="slotProps">
  {{slotPrOps.info.name}}
 </template>
</dada-list>
</div>

購物車功能的步驟，實現總體佈局和樣式，劃分功能組件，組合全部子組件造成總體結構，逐個實現各個組件功能，標題組件，列表組件，結算組件。

最後

歡迎加我微信(xiaoda0423)，拉你進技術羣，長期交流學習...
歡迎關注「達達前端」,認真學前端，作個有專業的技術人...

在博客平臺裏，將來的路還很長，也但願本身之後的文章你們能多多支持，多多批評指正，咱們一塊兒進步，一塊兒走花路。

很是感謝讀者能看到這裏，若是這個文章寫得還不錯，以爲「達達」我有點東西的話，以爲我可以堅持的學習，以爲此人能夠交朋友的話， 求點贊👍 求關注❤️ 求分享👥 對暖男我來講真的

很是有用！！！

❤️ 不要忘記留下你學習的腳印 [點贊 + 收藏 + 評論]

做者Info：

【做者】：Jeskson
【原創公衆號】：達達前端小酒館。
【福利】：公衆號回覆 「資料」 送自學資料大禮包（進羣分享，想要啥就說哈，看我有沒有）！
【轉載說明】：轉載請說明出處，謝謝合做！~

大前端開發，定位前端開發技術棧博客，PHP後臺知識點，web全棧技術領域，數據結構與算法、網絡原理等通俗易懂的呈現給小夥伴。謝謝支持，承蒙厚愛！！！

---

若本號內容有作得不到位的地方（好比：涉及版權或其餘問題），請及時聯繫咱們進行整改便可，會在第一時間進行處理。

---

請點贊！由於大家的贊同/鼓勵是我寫做的最大動力！

歡迎關注達達的CSDN！

這是一個有質量，有態度的博客