Vue全家桶之组件化开发

file

作者 | Jeskson

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

学习组件化开发，首先掌握组件化的开发思想，组件的注册方式，组件间的数据交互方式，组件插槽的用法，vue调式工具的用法，组件的方式来实现业务逻辑功能。

组件化开发思想，组件注册，组件调式，组件间的数据交互，组件插槽

组件化规范，就是多的可能性重用

全局组件注册语法

代码语言：javascript复制

Vue.component(组件名称, {
 data: 组件数据,
 template: 组件模板内容
})

代码语言：javascript复制

// 定义一个名为button-counter的新组件
Vue.component('button-counter', {
 data: function() {
  return {
   count: 0
  }
 },
 template: '<button v-on:click="count  ">点击了{{count}}次</button>
})

组件的用法

代码语言：javascript复制

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

代码语言：javascript复制

<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必须是一个函数，组件模板内容必须是单个跟元素

代码语言：javascript复制

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

组件命名方式

代码语言：javascript复制

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

// 驼峰方式
Vue.component('MyComponent',{/*...*/}}

局部组件注册

代码语言：javascript复制

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

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

vue调式工具的用法

file

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接收传递过来的值

代码语言：javascript复制

Vue.component('dada-item', {
 props: ['title'], // 用于接收父组件接收过来的数据
 template: '<div>{{title}}</div>'
})

父组件通过属性的方式将值传递给子组件

代码语言：javascript复制

<dada-item title="来自父组件的数据"></dada-item>
// 静态

<dada-item :title="title"></dada-item>
// 动态的进行属性的绑定

代码示例：

代码语言：javascript复制

<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中使用驼峰的形式，则在模板中需要使用短橫线的形式

字符串形式的模板中没有这个限制

代码语言：javascript复制

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

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

代码语言：javascript复制

<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

代码语言：javascript复制

// 字符串形式
<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>

代码语言：javascript复制

// 数字传值
<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'
  }
 });

子组件向父组件传值

代码语言：javascript复制

<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']
  }
 }];

子组件向父组件传值,子组件通过自定义事件向父组件传递信息

代码语言：javascript复制

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

父组件监听子组件事件

代码语言：javascript复制

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

非父子组件传值

兄弟组件之间的交互

file

代码语言：javascript复制

var event = new Vue()

事件中心

监听事件和事件的销毁

代码语言：javascript复制

event.$on('自定义事件的名称',事件函数)
监听事件，第一个参数，自定义监听事件的名称，第二个为事件函数

event.$off('自定义事件的名称')
// 销毁事件

触发事件
event.$emit('自定义事件的名称', id)

代码语言：javascript复制

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

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

组件插槽

父组件向子组件传递数据，父组件传给子组件

代码语言：javascript复制

// 父组件
<dada-item> dada </dada-item>
这里的dada 没有插槽是显示不了的

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

插槽的位置位于子组件的模板中

代码语言：javascript复制

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

// 显示内容，插槽
<dada-box> dada hello </dada-box>

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

代码语言：javascript复制

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

插槽内容

代码语言：javascript复制

<dada-layout>
 <h1 slot="header"> 标题</h1>
 <p>你让开，达达来了</p>
 <h1 slot="footer"> 底部</h1>
</dada-layout>

代码语言：javascript复制

<template slot="header">
<p>标题1</p>
<p>标题2</p>
</template>
// 放置更多内容

作用域插槽

代码语言：javascript复制

<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'
  },{
  ...
  }
  ]
 }

插槽的定义，子组件中

代码语言：javascript复制

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

代码语言：javascript复制

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

</template>
</dada-list>

代码语言：javascript复制

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

购物车功能的步骤，实现整体布局和样式，划分功能组件，组合所有子组件形成整体结构，逐个实现各个组件功能，标题组件，列表组件，结算组件。

最后

欢迎加我微信(xiaoda0423)，拉你进技术群，长期交流学习... 欢迎关注「达达前端」,认真学前端，做个有专业的技术人...

在博客平台里，未来的路还很长，也希望自己以后的文章大家能多多支持，多多批评指正，我们一起进步，一起走花路。

非常感谢读者能看到这里，如果这个文章写得还不错，觉得「达达」我有点东西的话，觉得我能够坚持的学习，觉得此人可以交朋友的话，求点赞? 求关注❤️ 求分享? 对暖男我来说真的

非常有用！！！

❤️ 不要忘记留下你学习的脚印 [点赞收藏评论]

作者Info：

【作者】：Jeskson 【原创公众号】：达达前端小酒馆。【福利】：公众号回复 “资料” 送自学资料大礼包（进群分享，想要啥就说哈，看我有没有）！【转载说明】：转载请说明出处，谢谢合作！~

大前端开发，定位前端开发技术栈博客，PHP后台知识点，web全栈技术领域，数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持，承蒙厚爱！！！

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

请点赞！因为你们的赞同/鼓励是我写作的最大动力！

欢迎关注达达的CSDN！

这是一个有质量，有态度的博客

前端技术栈

npm yarn 网站 vue.js

0 人点赞

Vue全家桶之组件化开发

全局组件注册语法

组件的用法

组件注册时

vue调式工具的用法

调式工具的安装

props属性名的规则

props属性值的类型

组件插槽

最后

❤️ 不要忘记留下你学习的脚印 [点赞 收藏 评论]

请点赞！因为你们的赞同/鼓励是我写作的最大动力！

欢迎关注达达的CSDN！

❤️ 不要忘记留下你学习的脚印 [点赞收藏评论]