vue的父子组件通信

父子组件通信：
1.父组件向子组件传递数据，子组件可以使用 props 接收父组件的数据
2.子组件可以使用this.$emit触发父组件的自定义事件
父组件通过props向子组件传递数据
第一步：需要在父组件的data里面定义好所需要的数据

data() {return {tabsData:[...]}
},

然后在父组件中子组件的标签里面进行数据绑定（如果传递的数据是静态的，可以不进行绑定）

 <question-form:tabs-data = 'tabsData'/>

注意：在标签上的属性都要用小写，或者中横线 - 连接

vue官网是这样说的（HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用DOM 中的模板时，amelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名）

数据如果是静态

<child msg= "这里是你要传给子组件的数据" />

第二步：子组件接收值
子组件用props来接收值

 props:{tabsData:{default:()=>[],type:Array}},

注意：在props中定义的属性，都可以在子组件中直接使用；如果props接收的数据需要处理，因为props里面的数据不能直接修改，需要在data里面重新定义一个新的变量，把接收到的数据赋值给这个变量，然后做修改。

子组件使用this. $emit（）向父组件传值，父组件用v-on来监听子组件的事件
首先需要在父组件中引入子组件，然后传值
第一步：在父组件中引入子组件，用import引入

import questionForm from './question/questionForm';

然后声明注册组件

  components: {questionForm},

把子组件当做标签使用

 <question-form@closeExamTitle="closeExamTitle"/>

第二步：子组件向父组件传值
在子组件中需要向父组件传值处使用this.emit（“function”,param）或者this.emit（“function”,param）或者this.emit（“function”,param）或者this.emit（“function”）,其中function为父组件定义的函数，param为向父组件传递的数据
带参数

    saveExamTitle() {...this.$emit('closeExamTitle', 'refresh');...},

不带参数

    // 取消修改的方法cancle() {this.$emit('cancledialog');}

在父组件中子组件引用处添加函数v-on:function（子组件定义的函数） = “xxx（父组件定义的函数，用于接收子组件传值并进行相应的数据处理）”，这两个函数名可定义为同一名称。
v-on：可用@代替，比如@function = “xxx”

 <question-form@closeExamTitle="closeExamTitle"/>

 <change-password@cancledialog="cancle" />

如果有参数就在父组件定义的方法里面接收子组件的参数

    closeExamTitle(isRefresh) {//可以根据参数做操作}

vue的父子组件通信相关推荐

Vue.js 父子组件通信的十种方式；告诉世界前端也能做 AI；你可能不知道的14个JavaScript调试技巧...
记得点击文章末尾的"阅读原文"查看哟~ 下面先一起看下本周的摘要吧~ 想了解老用户如何参与阿里云双十一1折拼团特惠主机的,可以看第二条推送,文中提供了两种方法~,一起看看本周有哪些 ...
Vue 非父子组件通信方案
Vue 非父子组件通信方案概述在 Vue 中模块间的通信很普遍如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...
Vue 非父子组件通信（ref）
Vue 非父子组件通信 (ref) 流程:1. 先在son子组件中定义一个数据和事件处理程序data( ) { return { flag: false }} , methods: { cry( ) ...
Vue的父子组件通信(十种)
设计的面试题 Vue中父子组件通信有哪些方式? 概述通信方式无外乎就那几种: Prop 常用$emit 组件封装用的较多.sync 语法糖 (较少)$attrs和$listeners(组件封装用的较 ...
html中的父子通信代码,Vue.js 父子组件通信的十种方式
面试官:Vue 中父子组件通信有哪些方式? 自己先想一分钟. 无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽,社区活跃,第三方套件还多.真的是前端开发人员必备 ...
Vue 非父子组件通信
前面的话在实际业务中,除了父子通信外,还有很多非父子组件通信的场景,非父子组件一般有两种,兄弟组件和跨多级组件.Vue.js 2.x中,使用一个空的Vue实例作为中央事件总线(bus). 中央事件总 ...
【Vue】父子组件通信
[Vue]父子组件通信前言父组件向子组件传值法一: props 法二: $parent 子组件向父组件传值 $emit $emit + .sync $refs v-model 前言
VUE非父子组件通信Bus——公交车踩坑笔记
抛开父子组件的通讯,对于非父子组件通信,简单的数据交互,使用Bus是非常不错的. 遇到的坑有两个. 1.两个组件的信息交互代码写在哪个生命周期函数中,如果只是点击组件A标签触发函数,然后向界面B传递参 ...
vue：父子组件通信
页面增加展示文字 1.进入demo-project项目的src\components目录下新建views目录,并新建First.vue文件 2.进入router目录下的index.js并配置路由路径: ...

vue的父子组件通信

vue的父子组件通信相关推荐

最新文章

热门文章