3：Vue组件化开发
组件化开发
组件
- 组件 (Component) 是 Vue.js 最强大的功能之一
- 组件可以扩展 HTML 元素，封装可重用的代码
- 思想体现：标准，分治，重用，组合
一：组件注册
全局注册
- Vue.component(‘组件名称’, { }) 第1个参数是标签名称，第2个参数是一个选项对象
- 全局组件注册后，任何vue实例都可以用
组件基础用法
<div id="app">
<div>{{msg}}div>
<button-count>button-count>
div>
<script src="../vue.js">script>
<script>
Vue.component('button-count', {
//data必须是一个函数
data: function() {
return {
count: 0
}
},
// template: ''
//也可使用模板字符串写法（es6语法，更易懂）
//组件模板内容必须是单个根元素
template: `
`,
// 模板后面可追加方法
methods: {
handle: function() {
this.count++
}
}
})
var vm = new Vue({
el: '#app',
data: {
msg: 'nahao'
}
});
script>
组件注意事项
- 组件参数的data值必须是函数同时这个函数要求返回一个对象
- 组件模板必须是单个根元素
- 组件模板的内容可以是模板字符串
- 组件命名方式（短横线，驼峰）
<div id="app">
<button-counter>button-counter>
<button-counter>button-counter>
<button-counter>button-counter>
<hello-world>hello-world>
div>
<script type="text/javascript">
//5 如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，
// 7、但是在普通的标签模板中，必须使用短横线的方式使用组件
Vue.component('HelloWorld', {
data: function(){
return {
msg: 'HelloWorld'
}
},
template: '{{msg}}'
});
Vue.component('button-counter', {
// 1、组件参数的data值必须是函数
// 同时这个函数要求返回一个对象
data: function(){
return {
count: 0
}
},
// 2、组件模板必须是单个根元素
// 3、组件模板的内容可以是模板字符串
template: `
# 6 在字符串模板中可以使用驼峰的方式使用组件
局部注册
- 只能在当前注册它的vue实例中使用（父组件）
<div id="app">
<div>{{msg}}div>
<component-a>component-a>
<component-b>component-b>
<component-c>component-c>
div>
<script src="../vue.js">script>
<script>
//定义局部组件
var ComponentA = {
data: function() {
return {
msg: '我是A'
}
},
template: '{{msg}}'
};
var ComponentB = {
data: function() {
return {
msg: '我是B'
}
},
template: '{{msg}}'
};
var ComponentC = {
data: function() {
return {
msg: '我是C'
}
},
template: '{{msg}}'
}
var vm = new Vue({
el: '#app',
data: {
msg: 'nahao'
},
//局部组件的注册
components: {
'component-a': ComponentA,
'component-b': ComponentB,
'component-c': ComponentC
}
});
script>
二：Vue 调试工具
安装
- 安装方法1
Google插件商店搜索Vue.js devtools，下载安装，然后打开允许访问网页，即可调试
- 安装方法2（有点耗时）
（1）到Vue官网
（2）来到GitHub
（3）根据提示操作它
（4）步骤为：克隆仓库，安装依赖包，构建，打开Chrome扩展页面，选中开发者模式，加载已解压扩展（选择shell/chrome），完成
调试
- 调试文件
<div id="app">
<div class="rootClass">{{root}}div>
<first>first>
<second>second>
div>
<script src="../vue.js">script>
<script>
//二级组件
Vue.component('first', {
data: function() {
return {
first: '二级组件'
}
},
template: `
{{first}}
{{second}}
'
});
var vm = new Vue({
el: '#app',
data: {
root: '顶层组件'
}
});
script>
- 调试图（安装完成后开发者工具会多出个Vue选项且高亮）
三：Vue组件之间数据交互
父组件向子组件传值
- 父组件发送的形式是以属性的形式绑定值到子组件身上。
- 然后子组件用属性props接收
- 在props中使用驼峰形式，模板中需要使用短横线的形式字符串形式的模板中没有这个限制
<div id="app">
<div>{{pmsg}}div>
<menu-item title='来自父组件的值'>menu-item>
<menu-item :title='ptitle' content='hello'>menu-item>
div>
<script type="text/javascript">
Vue.component('menu-item', {
// 3、 子组件用属性props接收父组件传递过来的数据
props: ['title', 'content'],
data: function() {
return {
msg: '子组件本身的数据'
}
},
template: '{{msg + "----" + title + "-----" + content}}'
});
var vm = new Vue({
el: '#app',
data: {
pmsg: '父组件中内容',
ptitle: '动态绑定属性'
}
});
script>
子组件向父组件传值
- 子组件用
$emit()触发事件 $emit()第一个参数为 自定义的事件名称 第二个参数为需要传递的数据（第二个参数也可省略）- 父组件用v-on 监听子组件的事件
<div id="app">
<div :style="{fontSize:fontSize + 'px'}">{{msg}}div>
<menu-item @enlarge-text="handle($event)">menu-item>
div>
<script src="../vue.js">script>
<script>
Vue.component('menu-item', {
//$emit(""),来给父组件建立联系(自定义名字后，携带参数)
template: `
兄弟之间的传递
- 兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据
- 提供事件中心 var hub = new Vue()
- 传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)
- 接收数据方，通过mounted(){} 钩子中 触发hub.$on()方法名
- 销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据
<div id="app">
<div>父组件div>
<div>
<button @click='handle'>销毁事件button>
div>
<test-tom>test-tom>
<test-jerry>test-jerry>
div>
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
/*
兄弟组件之间数据传递
*/
//1、 提供事件中心
var hub = new Vue();
Vue.component('test-tom', {
data: function(){
return {
num: 0
}
},
template: `
TOM:{{num}}
`,
methods: {
handle: function(){
//2、传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据) 触发兄弟组件的事件
hub.$emit('jerry-event', 2);
}
},
mounted: function() {
// 3、接收数据方，通过mounted(){} 钩子中 触发hub.$on(方法名
hub.$on('tom-event', (val) => {
this.num += val;
});
}
});
Vue.component('test-jerry', {
data: function(){
return {
num: 0
}
},
template: `
JERRY:{{num}}
`,
methods: {
handle: function(){
//2、传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据) 触发兄弟组件的事件
hub.$emit('tom-event', 1);
}
},
mounted: function() {
// 3、接收数据方，通过mounted(){} 钩子中 触发hub.$on()方法名
hub.$on('jerry-event', (val) => {
this.num += val;
});
}
});
var vm = new Vue({
el: '#app',
data: {
},
methods: {
handle: function(){
//4、销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据
hub.$off('tom-event');
hub.$off('jerry-event');
}
}
});
script>
四：组件插槽
- 组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力
匿名插槽
<div id="app">
<alert-box>有bug发生alert-box>
<alert-box>有一个警告alert-box>
<alert-box>alert-box>
div>
<script type="text/javascript">
/*
组件插槽：父组件向子组件传递内容
*/
Vue.component('alert-box', {
template: `
ERROR:
# 当组件渲染的时候，这个 元素将会被替换为“组件标签中嵌套的内容”。
# 插槽内可以包含任何模板代码，包括 HTML
默认内容
`
});
var vm = new Vue({
el: '#app',
data: {
}
});
script>
body>
html>
具名插槽
- 具有名字的插槽
- 使用 中的 “name” 属性绑定元素
<div id="app">
<base-layout>
<p slot='header'>标题信息p>
<p>主要内容1p>
<p>主要内容2p>
<p slot='footer'>底部信息信息p>
base-layout>
<base-layout>
<template slot='header'>
<p>标题信息1p>
<p>标题信息2p>
template>
<p>主要内容1p>
<p>主要内容2p>
<template slot='footer'>
<p>底部信息信息1p>
<p>底部信息信息2p>
template>
base-layout>
div>
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
/*
具名插槽
*/
Vue.component('base-layout', {
template: `
### 1、 使用 中的 "name" 属性绑定元素 指定当前插槽的名字
`
});
var vm = new Vue({
el: '#app',
data: {
}
});
script>
body>
html>
作用域插槽
- 父组件对子组件加工处理
- 既可以复用子组件的slot，又可以使slot内容不一致
<div id="app">
<fruit-list :list='list'>
<template slot-scope='slotProps'>
<strong v-if='slotProps.info.id==3' class="current">
{{slotProps.info.name}}
strong>
<span v-else>{{slotProps.info.name}}span>
template>
fruit-list>
div>
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
/*
作用域插槽
*/
Vue.component('fruit-list', {
props: ['list'],
template: `
### 3、 在子组件模板中,元素上有一个类似props传递数据给组件的写法msg="xxx",
### 插槽可以提供一个默认内容，如果父组件没有为这个插槽提供了内容，会显示默认的内容。
如果父组件为这个插槽提供了内容，则默认的内容会被替换掉
{{item.name}}
`
});
var vm = new Vue({
el: '#app',
data: {
list: [{
id: 1,
name: 'apple'
},{
id: 2,
name: 'orange'
},{
id: 3,
name: 'banana'
}]
}
});
script>
body>
html>
last：购物车案例
1. 实现组件化布局
- 把静态页面转换成组件化模式
- 把组件渲染到页面上
<div id="app">
<div class="container">
<my-cart>my-cart>
div>
div>
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
# 1、 把静态页面转换成组件化模式
# 1.1 标题组件
var CartTitle = {
template: `
我的商品
`
}
# 1.2 商品列表组件
var CartList = {
# 注意点 ： 组件模板必须是单个根元素
template: `
`
}
# 1.3 商品结算组件
var CartTotal = {
template: `
总价：123
`
}
## 1.4 定义一个全局组件 my-cart
Vue.component('my-cart',{
## 1.6 引入子组件
template: `
2、实现 标题和结算功能组件
- 标题组件实现动态渲染
- 从父组件把标题数据传递过来 即 父向子组件传值
- 把传递过来的数据渲染到页面上
- 结算功能组件
- 从父组件把商品列表list 数据传递过来 即 父向子组件传值
- 把传递过来的数据计算最终价格渲染到页面上
<div id="app">
<div class="container">
<my-cart>my-cart>
div>
div>
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
# 2.2 标题组件 子组件通过props形式接收父组件传递过来的uname数据
var CartTitle = {
props: ['uname'],
template: `
{{uname}}的商品
`
}
# 2.3 商品结算组件 子组件通过props形式接收父组件传递过来的list数据
var CartTotal = {
props: ['list'],
template: `
总价：{{total}}
`,
computed: {
# 2.4 计算商品的总价 并渲染到页面上
total: function() {
var t = 0;
this.list.forEach(item => {
t += item.price * item.num;
});
return t;
}
}
}
Vue.component('my-cart',{
data: function() {
return {
uname: '张三',
list: [{
id: 1,
name: 'TCL彩电',
price: 1000,
num: 1,
img: 'img/a.jpg'
},{
id: 2,
name: '机顶盒',
price: 1000,
num: 1,
img: 'img/b.jpg'
},{
id: 3,
name: '海尔冰箱',
price: 1000,
num: 1,
img: 'img/c.jpg'
},{
id: 4,
name: '小米手机',
price: 1000,
num: 1,
img: 'img/d.jpg'
},{
id: 5,
name: 'PPTV电视',
price: 1000,
num: 2,
img: 'img/e.jpg'
}]
}
},
# 2.1 父组件向子组件以属性传递的形式 传递数据
# 向标题组件传递 uname 属性 向 商品结算组件传递 list 属性
template: `
3. 实现列表组件删除功能
- 从父组件把商品列表list 数据传递过来 即 父向子组件传值
- 把传递过来的数据渲染到页面上
- 点击删除按钮的时候删除对应的数据
- 给按钮添加点击事件把需要删除的id传递过来
- 子组件中不推荐操作父组件的数据有可能多个子组件使用父组件的数据 我们需要把数据传递给父组件让父组件操作数据
- 父组件删除对应的数据
- 给按钮添加点击事件把需要删除的id传递过来
<div id="app">
<div class="container">
<my-cart>my-cart>
div>
div>
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
var CartTitle = {
props: ['uname'],
template: `
{{uname}}的商品
`
}
# 3.2 把列表数据动态渲染到页面上
var CartList = {
props: ['list'],
template: `
`,
methods: {
del: function(id){
# 3.4 子组件中不推荐操作父组件的数据有可能多个子组件使用父组件的数据
# 我们需要把数据传递给父组件 让父组件操作数据
this.$emit('cart-del', id);
}
}
}
var CartTotal = {
props: ['list'],
template: `
总价：{{total}}
`,
computed: {
total: function() {
// 计算商品的总价
var t = 0;
this.list.forEach(item => {
t += item.price * item.num;
});
return t;
}
}
}
Vue.component('my-cart',{
data: function() {
return {
uname: '张三',
list: [{
id: 1,
name: 'TCL彩电',
price: 1000,
num: 1,
img: 'img/a.jpg'
},{
id: 2,
name: '机顶盒',
price: 1000,
num: 1,
img: 'img/b.jpg'
},{
id: 3,
name: '海尔冰箱',
price: 1000,
num: 1,
img: 'img/c.jpg'
},{
id: 4,
name: '小米手机',
price: 1000,
num: 1,
img: 'img/d.jpg'
},{
id: 5,
name: 'PPTV电视',
price: 1000,
num: 2,
img: 'img/e.jpg'
}]
}
},
# 3.1 从父组件把商品列表list 数据传递过来 即 父向子组件传值
template: `
4. 实现组件更新数据功能 上
- 将输入框中的默认数据动态渲染出来
- 输入框失去焦点的时候 更改商品的数量
- 子组件中不推荐操作数据 把这些数据传递给父组件 让父组件处理这些数据
-
父组件中接收子组件传递过来的数据并处理
<div id="app">
<div class="container">
<my-cart>my-cart>
div>
div>
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
var CartTitle = {
props: ['uname'],
template: `
{{uname}}的商品
`
}
var CartList = {
props: ['list'],
template: `
`,
methods: {
changeNum: function(id, event){
# 3 子组件中不推荐操作数据 因为别的组件可能也引用了这些数据
# 把这些数据传递给父组件 让父组件处理这些数据
this.$emit('change-num', {
id: id,
num: event.target.value
});
},
del: function(id){
// 把id传递给父组件
this.$emit('cart-del', id);
}
}
}
var CartTotal = {
props: ['list'],
template: `
总价：{{total}}
`,
computed: {
total: function() {
// 计算商品的总价
var t = 0;
this.list.forEach(item => {
t += item.price * item.num;
});
return t;
}
}
}
Vue.component('my-cart',{
data: function() {
return {
uname: '张三',
list: [{
id: 1,
name: 'TCL彩电',
price: 1000,
num: 1,
img: 'img/a.jpg'
}]
},
template: `
5. 实现组件更新数据功能 下
- 子组件通过一个标识符来标记对用的用户点击 + - 或者输入框输入的内容
- 父组件拿到标识符更新对应的组件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
.container {
}
.container .cart {
width: 300px;
margin: auto;
}
.container .title {
background-color: lightblue;
height: 40px;
line-height: 40px;
text-align: center;
/*color: #fff;*/
}
.container .total {
background-color: #FFCE46;
height: 50px;
line-height: 50px;
text-align: right;
}
.container .total button {
margin: 0 10px;
background-color: #DC4C40;
height: 35px;
width: 80px;
border: 0;
}
.container .total span {
color: red;
font-weight: bold;
}
.container .item {
height: 55px;
line-height: 55px;
position: relative;
border-top: 1px solid #ADD8E6;
}
.container .item img {
width: 45px;
height: 45px;
margin: 5px;
}
.container .item .name {
position: absolute;
width: 90px;
top: 0;left: 55px;
font-size: 16px;
}
.container .item .change {
width: 100px;
position: absolute;
top: 0;
right: 50px;
}
.container .item .change a {
font-size: 20px;
width: 30px;
text-decoration:none;
background-color: lightgray;
vertical-align: middle;
}
.container .item .change .num {
width: 40px;
height: 25px;
}
.container .item .del {
position: absolute;
top: 0;
right: 0px;
width: 40px;
text-align: center;
font-size: 40px;
cursor: pointer;
color: red;
}
.container .item .del:hover {
background-color: orange;
}
style>
head>
<body>
<div id="app">
<div class="container">
<my-cart>my-cart>
div>
div>
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
var CartTitle = {
props: ['uname'],
template: `
{{uname}}的商品
`
}
var CartList = {
props: ['list'],
template: `
`,
methods: {
changeNum: function(id, event){
this.$emit('change-num', {
id: id,
type: 'change',
num: event.target.value
});
},
sub: function(id){
# 2 数量的增加和减少通过父组件来计算 每次都是加1 和 减1 不需要传递数量 父组件需要一个类型来判断 是 加一 还是减1 以及是输入框输入的数据 我们通过type 标识符来标记 不同的操作
this.$emit('change-num', {
id: id,
type: 'sub'
});
},
add: function(id){
# 2 数量的增加和减少通过父组件来计算 每次都是加1 和 减1 不需要传递数量 父组件需要一个类型来判断 是 加一 还是减1 以及是输入框输入的数据 我们通过type 标识符来标记 不同的操作
this.$emit('change-num', {
id: id,
type: 'add'
});
},
del: function(id){
// 把id传递给父组件
this.$emit('cart-del', id);
}
}
}
var CartTotal = {
props: ['list'],
template: `
总价：{{total}}
`,
computed: {
total: function() {
// 计算商品的总价
var t = 0;
this.list.forEach(item => {
t += item.price * item.num;
});
return t;
}
}
}
Vue.component('my-cart',{
data: function() {
return {
uname: '张三',
list: [{
id: 1,
name: 'TCL彩电',
price: 1000,
num: 1,
img: 'img/a.jpg'
},{
id: 2,
name: '机顶盒',
price: 1000,
num: 1,
img: 'img/b.jpg'
},{
id: 3,
name: '海尔冰箱',
price: 1000,
num: 1,
img: 'img/c.jpg'
},{
id: 4,
name: '小米手机',
price: 1000,
num: 1,
img: 'img/d.jpg'
},{
id: 5,
name: 'PPTV电视',
price: 1000,
num: 2,
img: 'img/e.jpg'
}]
}
},
template: `
You are a student
冲冲冲
下一篇：Vue前后端交互