vue组件之间的通信,父子之间的数据通信
父子组件之间的通信问题既可以传递数据也可以传递变量,父组件传递数据给子组件可以使用props,子组件传递数据给父组件则可以自定义函数来监听子组件的事件发射器。
首先说说组件注册,组件的注册分为全局注册以及局部注册,全局注册的话要写在顶部,每个实例化的Vue对象都可以使用;而局部注册只能指定的可以使用。
1.全局组件
所有实例都能用全局组件。
全局组件实例
注册一个简单的全局组件 runoob,并使用它,注意这里就不用写在某个实例化的vue对象中了,直接在DOM中写就好了:
2.局部组件
我们也可以在实例选项中注册局部组件,这样组件只能在这个实例中使用:
局部组件实例
注册一个简单的局部组件 runoob,并使用它:
父组件传递数据给子组件采用:
props 是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明.
Props 实例
<div id="app">
<child :message="message"></child>
<!-- message前面加上:说明,后面的"message"是一个变量,而不是一个定值;如果想传一个定值,那么去掉 -->
<!-- message前面的冒号就可以,定值就是 message -->
</div>
// 注册
Vue.component('child', {
// 声明 props
props: ['message'],
// 同样也可以在 vm 实例中像 "this.message" 这样使用
template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
el: '#app',
data:{
message:"hello",
}
})
</body>
动态 Prop
类似于用 v-bind 绑定 HTML 特性到一个表达式,也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时,该变化也会传导给子组件:
以下实例中将 v-bind 指令将 todo 传到每一个重复的组件中:
- 使用
$on(eventName)
监听事件 - 使用
$emit(eventName)
触发事件
父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
具体的例子是:
<body>
<div id="app">
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</div>
<script>
Vue.component('button-counter', {
template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
incrementHandler: function () {
this.counter += 1
this.$emit('increment')
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})
</script>
</body>
vue组件之间的通信,父子之间的数据通信的更多相关文章
- Vue 组件&组件之间的通信 父子组件的通信
在Vue的组件内也可以定义组件,这种关系成为父子组件的关系: 如果在一个Vue实例中定义了component-a,然后在component-a中定义了component-b,那他们的关系就是: Vue ...
- vue组件间的通信
组件的定义: 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.v ...
- python全栈开发 * 进程之间的通信,进程之间数据共享 * 180726
进程之间的通信(IPC)队列和管道一.队列 基于管道实现 管道 + 锁 数据安全(一).队列 队列遵循先进先出原则(FIFO) 多用于维护秩序,买票,秒杀 队列的所有方法: put()(给队列里添加数 ...
- vue教程3-05 vue组件数据传递、父子组件数据获取,slot,router路由
vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...
- vue.js 创建组件 子父通信 父子通信 非父子通信
1.创建组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 7.vue组件(二)--双向绑定,父子组件访问
本文主要说两件事 1. 如何实现父子组件之间的双向绑定 2. 父组件如何访问子组件的data,method, 子组件如何访问父组件的data,method等 一. 如何实现父子组件之间的双向绑定 案例 ...
- Vue组件跨层级通信
正常组件间通信 父->子组件 是通过属性传递 子->父组件 是通过this.$emit()传递 this.$emit()返回的是this,如果需要一些值 可使用callback方式传递 p ...
- vue 组件间的通信
(1)props:用于父组件向子组件传递消息 使用方法: 在父组件中,使用子组件时,<Child v-bind:data="data"/>,通过v-bind把子组件需要 ...
- vue父子组件、兄弟组件之间的通信和访问
注意:1. vue组件间的通信其实有很多种方法,最常用的还是属性传值.事件传值.vuex; 其他方法参考 https://juejin.im/post/5bd18c72e51d455e3f6e4334 ...
- React 学习(六) ---- 父子组件之间的通信
当有多个组件需要共享状态的时候,这就需要把状态放到这些组件共有的父组件中,相应地,这些组件就变成了子组件,从而涉及到父子组件之间的通信.父组件通过props 给子组件传递数据,子组件则是通过调用父组件 ...
随机推荐
- LeetCode887鸡蛋掉落——dp
题目 题目链接 你将获得 K 个鸡蛋,并可以使用一栋从 1 到 N 共有 N 层楼的建筑.每个蛋的功能都是一样的,如果一个蛋碎了,你就不能再把它掉下去,如果没有碎可以继续使用.你知道存在楼层 F , ...
- bat2exe 就是这么简单 白研究半天VC++了
bat2exe 就是这么简单 白研究半天VC++了 结果:bat2exe编译的执行文件会被杀毒软件查杀.
- Mac OS 使用asio库
下载地址:http://sourceforge.net/projects/asio/files/asio/1.12.2%20%28Stable%29/ 本人下载的版本:asio-1.12.2 1,本人 ...
- 计算机内存数据存储基本原理----寄存器和RAM的电路基础
计算机里存储数据主要有这几个部件:CPU里的寄存器和缓存.内存(内存条)和磁盘,这里我们主要简单讲下寄存器和内存条的基础实现电路. 在前面的文章<CPU怎么计算1+1----CPU计算的电路基础 ...
- pavenet资源
网络结构:http://www.cnblogs.com/fariver/p/7449563.html 源码:https://github.com/sanghoon/pva-faster-rcnn 训练 ...
- 如何把datetime类型字段修改为int类型
如何把datetime类型字段修改为int类型 我有一个表为:table1 其中有一个datetime类型的字段 a 现在我想我想把字段a的类型改为int类型 当我执行以下命令时报如下的错误a ...
- LeetCode 303. Range Sum Query – Immutable
Given an integer array nums, find the sum of the elements between indices i and j (i ≤ j), inclusive ...
- CSS实现折叠面板
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- python 几种点积运算方式效率分析
本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/51793984 本文列举出几种pytho ...
- 【转】Java的path,classpath,java_home环境变量的配置与具体含义
对于一个Java初学者来说,第一步要做的是安装jdk并配置环境变量,一般按照书上或者网上的步骤,一步步照着做就行了,但是对于初学者来说,很多问题没有解决,比如为什么很多配置方法各不相同,却都能够配置成 ...