Vue 进阶之路（八）
之前的文章我们对组件 component 进行了简单的介绍，本章我们将深入了解一下组件，并实现父子组件间的传值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<counter :count="count1"></counter>
<counter :count="count2"></counter>
</div>
<script>
Vue.component("counter", {
props:['count'],
data(){
return{
number: this.count,
}
},
template: `
<p>{{count}} {{number}}</p>
`
});
var app = new Vue({
el: '#app',
data: {
count1: 1,
count2: 2,
}
})
</script>
</body>
</html>
结果如下：
上面的代码中我们定义了一个 counter 组件，并在 HTML 内插入了两次，分别通过 :count = "" 的方式将父组件内的 count1 和 count2 传入，然后我们在 counter 组件内通过 props 属性将 count 属性接住，这样我们就将父组件的值传递给了子组件。我们就可以在 template 的模板中将传过来的 count 数据插入，我们也可以在子组件的 data 内将传过来的 count 值赋值给一个新的变量 number。
如果从父组件传过来的值需要参与逻辑运算时我们推荐将传入的值重新赋值给一个变量，因为子组件不允许直接修改父组件传过来的值，我们可以将传入的值赋值给新的变量，然后将该变量再传给父组件来修改父组件的值。如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<counter :count="count1" @change="handleChange"></counter>
<counter :count="count2" @change="handleChange"></counter>
<p>{{total}}</p>
</div>
<script>
Vue.component("counter", {
props: ['count'],
data() {
return {
number: this.count,
}
},
methods: {
handleClick() {
this.number++;
this.$emit('change', 1)
}
},
template: `
<p @click="handleClick">{{number}}</p>
`
});
var app = new Vue({
el: '#app',
data: {
count1: 1,
count2: 2,
total: 3,
},
methods: {
handleChange(number) {
this.total = this.total + number
}
}
})
</script>
</body>
</html>
在以上代码中，我们在父组件中定义了一个 total 数据，初始值为 count1 + count2 的和。我们在子组件内定义了一个 handleClick() 的方法，让父组件传过来的 count 值每次都 +1，我们还在 handleClick() 的方法内定义了 this.$emit('change', 1) 的方法，它的意思是子组件通过 $emit 属性向外触发一个 change 事件，并且携带了一个参数 1，然后我们在 HTML 的 <counter> 标签内在父组件的 methods 属性内通过 handleChange() 方法监听这个 change 事件，即 @change 和 $emit 的事件名称自己定义，只要名称一致即可。在 handleChange() 方法内接收从子组件通过 change 事件传过来的参数 1，让后让 total 数据加上这个参数 1 即可实现一个简单的累加计算。
以上便是子组件向父组件传值的过程，结果如下：
从上面的例子我们已经实现了父子组件间的相互传值，是通过 change 事件将每次累加的数值 1 传给父组件，通过数据的方式修改 total 值，Vue 官方建议我们尽量通过数据的方式而不是操作 DOM 的方式来实现操作，但是在极端条件下我们必须要操作 DOM 来实现，Vue 也为我们提供操作 DOM 的方法，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<counter :count="count1" @change="handleChange" ref="one"></counter>
<counter :count="count2" @change="handleChange" ref="two"></counter>
<p>{{total}}</p>
</div>
<script>
Vue.component("counter", {
props: ['count'],
data() {
return {
number: this.count,
}
},
methods: {
handleClick() {
this.number++;
this.$emit('change')
}
},
template: `
<p @click="handleClick">{{number}}</p>
`
});
var app = new Vue({
el: '#app',
data: {
count1: 1,
count2: 2,
total: 3,
},
methods: {
handleChange() {
console.log(this.$refs.one);
console.log(this.$refs.two);
this.total = this.$refs.one.number + this.$refs.two.number;
}
}
})
</script>
</body>
</html>
上面的代码中，我们并没有通过 $emit 里的 change 事件传值给父组件，而是在 <coute> 标签内分别定义了 ref="one" 和 ref="two" 属性，并且在 handleChange() 方法内通过监听子组件的 change 改变时打印一下这两个 ref 内的值，控制台的输出日志如下：
里面既包含了 $el 的 DOM，还有初始值 count=1 即handleClick() 方法执行后 number=2 的值，所以我们可以拿到 number 的值，让两个 number 相加即为 total 的值。
在 vue 中我们还是建议通过数据来操作而不是通过 DOM 来执行操作。
Vue 进阶之路（八）的更多相关文章
- Vue 进阶之路（九）
之前的文章我们介绍了 vue 中父组件之间的传值,本章我们再来看一下父子组件间传值的参数校验和非 Props 特性. <!DOCTYPE html> <html lang=" ...
- Vue 进阶之路（七）
之前的文章我们对 vue 的列表输出做了介绍,本章我们来看一下 vue 的组件 component. <!DOCTYPE html> <html lang="en" ...
- Vue 进阶之路（六）
上篇文章我们分析了一下 vue 中的条件渲染,本篇我们说一下 vue 中的列表渲染和 set 方法. <!DOCTYPE html> <html lang="en" ...
- Vue 进阶之路（五）
之前的文章我们说了一下 vue 的样式绑定,这篇文章来介绍一下 vue 中的条件渲染,先看下面的代码: <!DOCTYPE html> <html lang="en&quo ...
- Vue 进阶之路（四）
之前的文章我们已经对 vue 有了初步认识,这篇文章我们通过一个例子说一下 vue 的样式绑定. 现在我们想要是想这样一个需求,页面上有个单词,当我们点击它的时候颜色变为红色,再点击一次变为原来的颜色 ...
- Vue 进阶之路（三）
之前的文章我们已经对 vue 有了初步认识,这篇文章我们通过一个例子说一下 vue 的方法 methods,计算属性 computed 和监听器 watch. 现在我们有一个需求,变量 firstNa ...
- Vue 进阶之路（二）
之前的文章我们初识了 vue,对其原理,数据绑定和方法进行了简单的演示,本篇将对 vue 插值表达式,v-text,v-html 进行讲解. <!DOCTYPE html> <htm ...
- Vue 进阶之路（一）
vue 3.x 马上就要问世了,显然尤大大是不想让我们好好活了,但是转念一想,比你优秀的人都还在努力,那我们努力还有什么用,开个玩笑而已,本人对于 vue 的接触时间不长,对其也没有深入地去研究源码, ...
- Vue 进阶之路（十）
之前的文章介绍了 vue 的组件化,本章我们来看一下 vue 中组件的原生事件. <!DOCTYPE html> <html lang="en"> < ...
随机推荐
- uwsgi 服务 invalid request block size: 4161 (max 4096)...skip问题的解决
问题报错: invalid request block size: 4161 (max 4096)...skip 问题原因:默认的uwsgi分配一个小的buffer(4k)来接收每个请求的头信息,如果 ...
- java接受安卓及ios App上传的图片，并保存到阿里OSS
做后台的时候,写了两个方法,分别用来获取安卓和苹果IOS端上传的头像,保存到阿里云OSS图片存储服务器上.(SMM框架) 安卓及H5版本: /** * 上传用户头像 */ @RequestMappin ...
- Java并发-对象共享
我们不仅希望防止某个线程正在使用对象状态而其他的线程正在修改该状态,而且希望当一个线程修改了对象状态后,其他的线程能够看到发生的状态变化. 可见性:当读操作和写操作在不同的线程中进行时,他们的动作是共 ...
- asp.net MVC 框架中控制器里使用Newtonsoft.Json对前端传过来的字符串进行解析
下面我用一个实例来和大家分享一下我的经验,asp.net MVC 框架中控制器里使用Newtonsoft.Json对前端传过来的字符串进行解析. using Newtonsoft.Json; usin ...
- string to int
problem describe: given a string , first find the first word which is not white space;then there wil ...
- STL-Deque 源码剖析
G++ ,cygnus\cygwin-b20\include\g++\stl_deque.h 完整列表 /* * * Copyright (c) 1994 * Hewlett-Packard Comp ...
- 洛谷 P1069 解题报告
P1069 细胞分裂 题目描述 \(Hanks\)博士是\(BT\) (\(Bio-Tech\),生物技术) 领域的知名专家.现在,他正在为一个细胞实验做准备工作:培养细胞样本. \(Hanks\) ...
- 【问题】sql数据库报无效的数据证书，需重新安装
事情的经过: 今天打开sql2014数据库,没有成功运行,但是给我弹出一个"无效的数据证书,需要重新安装!"提示.什么情况.为什么,应该是前一天弄vs导致的.因为升级了vs2017 ...
- css绝对底部的实现方法
最近发现公司做的好多管理系统也存在这样的问题,当页面不够长的时候,页尾也跟着跑到了页面中部,这样确实感觉视觉体验不太好,没有研究之前还真不知道还能用css实现,主要利用min-height;paddi ...
- QT中的相对位置，绝对位置之间的转换(maptoglobal,mapfromglobal)
1. 相对位置:每个Qwidget都能通过pos()获取到相对自己父类窗口的位置, 2. 绝对位置:pWidget->mapToGlobal(QPoint(0,0)) ;将当前控件的相对位置转换 ...