初识vue 2.0（5）：使用props父子组件通信

在复杂场景中，可以使用专门的状态管理模式 Vuex。

简单的场景中，可以使用一个父组件、若干个子组件来构建应用，这样通信会比使用vuex简单些：

1. 子组件的 props 选项可以接收父组件传递过来的数据，这是一个单向数据流的过程，子组件对props改动，不会影响父组件。

2. 子组件也可以通过自定义事件向父组件传递数据。父组件监听自定义事件，子组件使用 $emit 触发这个事件。

父组件:

1. 在父组件hello中引入子组件son，并注册在components中；

2. 在父组件hello的模版中，通过自定义标签引入子组件son模版。

3. 通过子组件son模版标签的自定义属性msg传递数据，传递动态数据使用 :msg (即：v-bind:msg)，否则直接使用msg即可。

4. 在子组件模版标签中监听自定义事件receive（@receive 即 v-on:receive），监听子组件传递的信息。

 1 <template>
 2   <div class="hello">
 3     <son :msg="msg" @receive="receive"></son>
 4     <p>{{ answer }}</p>
 5   </div>
 6 </template>
 7
 8 <script>
 9 import Son from '@/components/Son'
10 export default {
11   name: 'hello',
12   components: {
13     Son
14   },
15   data () {
16     return {
17       msg:'我是hello模块传递给子模块的信息',
18       answer:''
19     }
20   },
21   methods: {
22    receive(answer) {
23      this.answer = answer;
24     }
25   }
26 }
27 </script>

子组件：

为了模拟数据传递过程，在子组件中构建click事件，用于触发子组件对父组件的数据传递。

1. 子组件通过props接收父组件传递的数据msg。可以直接通过模版标签{{ msg }}显示于模版中，也可以通过this.msg获取。

2. 点击回复按钮，调用send方法，通过$emit，触发父组件中的自定义事件receive，将数据answer传递给父组件。

 1 <template>
 2   <div class="son">
 3     <p>{{ msg }} <button v-on:click="send">回复</button></p>
 4   </div>
 5 </template>
 6
 7 <script>
 8 export default {
 9   name: "son",
10   props: ["msg"],
11   data () {
12     return {
13       answer:"我是Son模块传递给父模块的信息"
14     }
15   },
16   methods: {
17    send() {
18       this.$emit("receive",this.answer);
19     }
20   }
21 }
22 </script>

还有一种组件通信方式是event bus，可以进行兄弟组件之间数据传递，有时间在分享下。 ^_^

转载于:https://www.cnblogs.com/phptree/p/9058125.html

初识vue 2.0（5）：使用props父子组件通信相关推荐

初识 Vue（18）---（非父子组件间的传值）
非父子组件间的传值常一个应用会以一棵嵌套的组件树的形式来组织:将一个大组件进行拆分下图这种情况的组件间传值(父子组件间传值) 方法:父组件通过 Props 向子组件传值,子组件通过事件触发向父组件 ...
Vue 3.0父子组件通信
在Vue 3.0 发布以后,我们基于新的特性,来归纳一下父子组件通信的方式.并且检验一下Vue 2.0中常用的通信方式,如何在Vue 3.0中使用.本文列出了三种常用的通信方式: 子组件通过emit函 ...
Vue 学习06——Vue父子组件通信、非父子组件通信1
目录㋀㋊ ✎ 父子组件间通信(Communication) ◆ 组件间通信父组件向子组件传递数据 ➬ ① 前言 ② demo ➬ 还有一种形式叫做插槽 ◆ 子组件向父组件传递数据 ① 前言 ② ...
vue父子组件通信之随机数小练习
目录 vue父子组件通信的理解父组件代码: 子组件代码: 效果图: vue父子组件通信的理解 1.Vue中子组件不能直接引用父组件的数据,需要通过props选项接收来自父组件的数据. 2.props ...
Vue的父子组件通信(十种)
设计的面试题 Vue中父子组件通信有哪些方式? 概述通信方式无外乎就那几种: Prop 常用$emit 组件封装用的较多.sync 语法糖 (较少)$attrs和$listeners(组件封装用的较 ...
html中的父子通信代码,Vue.js 父子组件通信的十种方式
面试官:Vue 中父子组件通信有哪些方式? 自己先想一分钟. 无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽,社区活跃,第三方套件还多.真的是前端开发人员必备 ...
vue组件通信案例练习（包含：父子组件通信及平行组件通信）
文章目录一.案例概述二.代码准备工作: 案例1.1:父组件向子组件传值(或者叫:子组件使用父组件属性),采用v-bind方式实现案例1.2:子组件向父组件传值(或者叫:子组件调用父组件方法), ...
vue 父子组件通信
文章目录大家好,我是夏小花下面是关于vue中父子组件通信案例,首先是父组件向子组件传递数据,然后子组件向父组件进行传递数据,代码中有序号标注的步骤,以及我画的一张逻辑图,结合代码去理解通信原理以及 ...
Vue.js-Day03-PM【组件通信（安装Vetur插件、父子组件通信、子父组件通信）、项目发送与启动（项目发给别人、启动别人的项目）】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 6.组件通信安装 Vetur 插件 6.1.父子组件通信子定义props 父组件模板图解 6.2.子父组 ...

初识vue 2.0（5）：使用props父子组件通信

初识vue 2.0（5）：使用props父子组件通信相关推荐

最新文章

热门文章