作者 | Jeskson

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

学习组件化开发，首先掌握组件化的开发思想，组件的注册方式，组件间的数据交互方式，组件插槽的用法，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)，拉你进技术群，长期交流学习...欢迎关注「达达前端」,认真学前端，做个有专业的技术人...

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

非常感谢读者能看到这里，如果这个文章写得还不错，觉得「达达」我有点东西的话，觉得我能够坚持的学习，觉得此人可以交朋友的话，求点赞

Vue全家桶之组件化开发相关推荐

Vue第二天学习总结—— Vue全家桶之组件化开发(组件化开发思想、组件注册、Vue调试工具用法、组件间数据交互传递、组件插槽、基于组件的案例——购物车)
(一) 组件化开发思想 1. 现实中的组件化思想体现组件化即是对某些可以进行复用的功能进行封装的标准化工作标准:要想组件能够成功组合在一起,每个组件必须要有标准分治:将不同的功能封装到不同的组件 ...
vue（9）—— 组件化开发 - webpack（3）
前面两个终于把webpack相关配置解析完了.现在终于进入vue的开发了 vue组件化开发预热前期准备创建如下项目: app.js: footer.js: main.js: webpack.con ...
Vue全家桶之组件间的通信（四）
Vue全家桶之组件间的通信(四) 概述组件是Vue中最强大的功能,组件实例之间的数据无法直接相互引用,所以需要掌握组件间通信的方式和技巧. 组件实例之间的关系可以分为父子关系.兄弟关系和隔代关系.针 ...
vue全家桶——vuex
本文主要介绍vuex[状态管理模式],在介绍vuex前,需要重点说下一些概念 vue最大的特点之一.数据驱动视图,可以吧数据理解成状态,视图-view可以理解成用户看到的页面,页面是动态变化的,而这个 ...
Vue3.x全家桶之Vue组件化开发(二)
✍灬更新说明更新时间:2022-1-03 更新内容: Vue2.x 更新至 Vue3.x Demo与文件.截图演示齐全保留了Coderwhy老师Vue2.x的精华部分,添加Vue3.x的内容在V ...
Vue 全家桶 + Electron 开发的一个跨三端的应用
GitHub Repo:vue-objccn Follow: halfrost · GitHub 项目地址:https://github.com/halfrost/vue-objccn 利用 Vue. ...
Vue 全家桶 + Electron 开发的一个跨三端的应用 1
代码地址如下: http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...
[在线+源码]vue全家桶+Typescript开发一款习惯养成APP
vue-ts-daily 基于Vue.js的2.5.13版本和TypeScript编写的模仿原生应用的WebApp. 源码地址欢迎star 项目演示地址建议直接添加到主屏幕(ios端体验差一些). ...
Vue开发入门(二) | 说说Vue全家桶有哪些~
全家桶,顾名思义,就是一个系列,可以组合开发成完整强大的Vue项目前言: *Vue两大核心思想:组件化和数据驱动. 组件化:把整体拆分为各个可以复用的个体数据驱动:通过数据变化直接影响bom展示, ...

Vue全家桶之组件化开发