-
Vue子组件给父组件传值 父组件给子组件传值 demo 示例代码
2019-08-15 10:38:01Vue子组件给父组件传值 需要使用自定义事件 流程： 1.子组件创建并监听自定义事件， 2.在事件函数里面执行emit函数，通过emit把想传的值传给父组件 3.父组件在子组件上监听emit定义的事件名称并绑定自身的函数，...展开全文QQ技术交流群 173683866 526474645 欢迎加入交流讨论，打广告的一律飞机票
Vue子组件给父组件传值 需要使用自定义事件
流程：
1.子组件创建并监听自定义事件，
2.在事件函数里面执行emit函数，通过emit把想传的值传给父组件
3.父组件在子组件上监听emit定义的事件名称并绑定自身的函数，在函数的参数中接收子组件传递的参数。
效果图：
实现代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 父组件和子组件相互传值demo</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <div id="counter-event-example"> <p>{{ total }}</p> <!--这里使用了两个子组件，因为子组件的data是函数，所以它们的值互不影响--> <!--父组件在使用子组件的地方直接用 v-on 来监听子组件触发的事件。--> <button-counter v-bind:idx="1" v-on:increment="appAddCounter"></button-counter> <button-counter v-bind:idx="2" v-on:increment="appAddCounter"></button-counter> </div> </div> <script> Vue.component('button-counter', { //1.使用 $on(eventName)监听事件 template: '<button v-on:click="addCounter">第{{idx}}个子组件： {{ counter }}</button>', props:['idx'], data: function() { return { counter: 0 } }, methods: { //子组件的自定义事件 addCounter: function() { this.counter += 1; var str ='我是第'+this.idx+'个子组件,我的值为：'+this.counter; //2.使用 $emit(eventName,obj) 触发事件 //increment: 是父组件指定的传数据绑定的函数，str: 子组件给父组件传递的数据 this.$emit('increment',str); } }, }) new Vue({ el: '#counter-event-example', data: { total: 0 }, methods: { appAddCounter: function(e) { console.log('子组件传的值：',e) this.total += 1 } } }) </script> </body> </html>
-
vue 子组件更新父组件状态 使用sync
2018-10-05 09:26:40通过sync修饰符，来实现子组件更新父组件状态，是目前写法上最方便的语法糖了。下面举个例子 1、首先父组件声明状态active，并写一个子组件 <compo :foo.sync="active"></compo&...展开全文通过
sync修饰符，来实现子组件更新父组件状态，是目前写法上最方便的语法糖了。下面举个例子1、首先父组件声明状态
active，并写一个子组件<compo :foo.sync="active"></compo>这种语法糖其实会被解析成
<compo :foo="active" @update:foo="val => active = val"></compo>2、在子组件中，要是想修改父组件
active的值，写个emit就搞定了this.$emit('update:foo', newValue)
-
Vue子组件向父组件传值（this.$emit()方法）
2018-08-13 19:10:46子组件使用this.$emit()向父组件传值 首先必须在父组件中引用子组件，然后实现传值 第一步 在父组件中引入子组件 使用import引入组件 import indexImportOrder from './components/indexImportOrder' 声明 ...展开全文子组件使用this.$emit()向父组件传值
首先必须在父组件中引用子组件，然后实现传值
-
第一步 在父组件中引入子组件
使用import引入组件
import indexImportOrder from './components/indexImportOrder'声明
//定义组件 components:{ indexImportOrder, },使用
<indexImportOrder ref="indexImportOrder"/>-
第二步 子组件向父组件传值
1. 在子组件中需要向父组件传值处使用this.$emit("function",param); //其中function为父组件定义函数，param为需要传递参数
//新订单页面跳转 viewBusiness(){ let flag = false; this.$emit('closeMain',flag); },2. 在父组件中子组件引用处添加函数v-on:function="function1"； //其中function为子组件中定义函数，function1为父组件定义函数--用于接收子组件传值并进行相应数据处理，可定义为同一名称
v-on： 可用 @ 代替 @function="function1" ，@ 为 v-on：的简写
<indexImportOrder ref="indexImportOrder" v-on:closeMain="closeMain"/>val及为子组件中flag，即接收的子组件参数
closeMain(val){ this.flag = val; },更详细解释可参照：https://www.cnblogs.com/padding1015/p/7878741.html
-
-
vue子组件监听父组件传值
2020-10-20 13:23:01vue子组件监听父组件传值展开全文
父组件通过props传值给子组件，当父组件传值发生了变化，我们期望子组件数据相应进行变化。方法较多，我们一一介绍。先写一个简易的父组件
// 父组件template内容 <button @click="addData">addDataButton</button> // 引用的子组件内容 <data-list-item :dataList="dataList"></data-list-item> // 父组件data中定义内容 dataList: [], // 父组件methods内容 addData() { this.dataList.push({ name: this.dataList.length, }) }再写一个简易的子组件
// 子组件template内容 <ul> <li></li> </ul> // 子组件props中内容 props: ['dataList'],props
直接使用父组件传递的
props变量// 子组件template内容 <ul> <li v-for="(list, index) in dataList" :key="index">{{ list.name }}</li> </ul>
我们可以看出来随着父组件数据的变化，props传递的字段dataList值动态变化。但这样存在一个弊端，就是在子组件中无法根据各类条件进一步处理传递的数据，所以我们更倾向于下一种。data
将
props中的值赋给data中定义的变量// 子组件template内容 <ul> <li v-for="(list, index) in childDataList" :key="index">{{ list.name }}</li> </ul> // 子组件data中定义内容 childDataList: this.dataList,
在vue调试工具中我们可以轻易看到，当我们点击按钮，props中的值进行相应变化，同时data中定义的变量值也同步变化。computed
如果父组件传递的值，在给定的初始条件即可完成数据的处理，那我们可以使用
computed// 子组件template内容 <ul> <li v-for="(list, index) in childDataList" :key="index">{{ list.name }}</li> </ul> // 子组件computed中定义内容 childDataList() { return this.dataList },
在vue调试工具中我们可以轻易看到，当我们点击按钮，props中的值进行相应变化，同时computed中定义的变量childDataList也同步变化。watch
采用
watch监听父组件传值也是常用的方法。
watch可以直接监听变化的传值类型为基本数据类型，引用数据类型可以监听Array，但是对引用数据类型中 instanceOf 为 Object监听则不是很理想，需要使用watch中的深度监听。普通监听
// 子组件template内容 <ul> <li v-for="(list, index) in childDataList" :key="index">{{ list.name }}</li> </ul> // 子组件data中定义内容 childDataList: [], // 子组件watch中定义的内容 dataList(val) { console.log('dataList change', val) this.childDataList = val },
可以看到随着父组件按钮的点击，子组件对父组件的传值监听会执行，同时改变子组件data中定义的childDataList值。这种方式的问题是，如果一开始父组件即传值过来，而watch是监听到变化才执行，则导致子组件无初始值。可以采用下面深度监听的写法，开启immediate为true。深度监听
修改下之前的父组件和子组件内容
// 父组件template内容修改 <button @click="changeData">changeDataButton</button> <data-list-item :dataObj="dataObj"></data-list-item> // 父组件data内容修改 dataObj: { name: 'caoyuan', age: 24, sex: 'man', }, // 父组件methods内容修改 changeData() { this.dataObj.name = this.dataObj.name + Math.random() },// 子组件template内容修改 <div> {{ personalInfo.name }} </div> // 子组件data内容修改 personalInfo: {}, // 子组件props修改 props: ['dataObj'], // 子组件watch修改 watch: { dataObj: { handler(val) { console.log('dataObj deep change', val) this.personalInfo = val }, deep: true, // 深度监听 immediate: true, // 初次监听即执行 }, },通过上面的方式，即可解决watch监听带来的一些问题
优化watch监听
若是只对object中特定字段进行监听，则可以采用下面方式
watch: { 'dataObj.name': { handler(val) { console.log('dataObj.name change', val) this.personalInfo = this.dataObj }, immediate: true, // 初次监听即执行 }, },这种方式消除深度监听对性能的消耗
-
Vue子组件向父组件传递data数据和方法2
2019-05-08 20:06:27上一期通过比较复杂的方式才实现了子组件向父组件传递data数据，但是这一次是很简单的方式，利用 ref属性 在子组件里设置ref属性，到时候父组件可以通过ref属性来获取子组件 父组件使用 this.$refs.ref值来... -
vue 子组件刷新父组件
2021-01-08 14:05:48vue 子组件刷新父组件 1、通过 $emit 触发 //在父组件中设置 @add = "add(val)" //子组件中使用 this.$emit('add', newVal) 2. 使用$parent触发 //子组件直接调用 this.$parent.getList() -
Vue 子组件修改父组件值的解决方法
2020-10-21 22:51:30此外，每次父组件的数据发生更新时，子组件的值都会更新到最新的数据，但不能直接在子组件内部改变prop（父组件传过来的值），否则浏览器就会发出警告 但我们可能会遇到，需要在子组件修改父组件值的需求，这里... -
解决vue 子组件修改父组件传来的props值报错问题
2020-10-16 00:44:39今天小编就为大家分享一篇解决vue 子组件修改父组件传来的props值报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧 -
Vue子组件向父组件传data数据
2019-05-08 19:20:01在Vue中，子组件是怎么向父组件传自己的data数据？ 原理：父组件可以通过给子组件绑定虚拟事件来向子组件传递自己的方法，因此这个虚拟事件就装载了父组件的方法，子组件拿到虚拟事件之后进行注册，就可以使用来自... -
vue子组件监听父组件的值同步更新数据
2019-03-01 09:49:07子组件 props : [“data”], 子组件监听 watch:{ data : (n ,o) => {//箭头函数 不然会发生this改变 console.log(n.img) this.imgs = n.img } } -
vue子组件调用父组件父页面的方法
2019-02-15 17:07:48如图：选择城市后，页面重新请求...第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <template> <div> <child></child> </div> </template>... -
vue子组件改变父组件数据的两种方法
2018-05-06 23:00:18今天再看github上别人的...子组件代码 <template> <div @click="open"></div> </template> methods: { open() { this.$emit('showbox',... -
vue子组件向父组件传值的方法
2019-05-25 13:28:38子组件向父组件，使用$emit方法，demo： 子组件的代码： <template> <div> <h1>this is child component</h1> <button @click="toParent">向父组件传值</button> </... -
vue子组件和父组件传值
2018-06-19 15:33:33vue子组件和父组件传值 近期在学习vue，总结了一下子组件和父组件间传值的方法： 父组件向子组件传值 子组件向父组件传值 父组件向子组件传值 父组件向子组件传递数据主要通过props来进行传递。子组件想... -
vue子组件给父组件传值
2018-08-21 10:28:12子组件： <template> <div class="app"> <input @click="sendMsg" type="button" value="给父组件传递值"> </... -
Vue子组件给父组件传值 父组件给子组件传值（附源码）
2019-08-21 10:54:18Vue子组件给父组件传值 需要使用自定义事件 流程： 1.子组件创建并监听自定义事件， 2.在事件函数里面执行emit函数，通过emit把想传的值传给父组件 3.父组件在子组件上监听emit定义的事件名称并绑定自身的函数，在... -
Vue 子组件与父组件之间的 双向数据绑定
2019-05-21 15:16:52方法一（常规） 父组件传递数据到子组件； 子组件将数据转成本地数据 props: ['name'], data() { return { ...所以要监听父组件传入数据的变化，随之更新子组件； watch: { // 监听父组件传... -
Vue子组件获取父组件传递的动态数据为空，el-autocomplete组件传递自定义数据问题
2019-02-14 16:10:59Vue子组件获取父组件传递的动态数据为空 当父组件 axjos 获取数据，子组件使用 props 接收数据时，执行 mounted 的时候 axios 还没有返回数据，而且 mounted 只执行一次，这时 props 中接收的数据为空 解决办法： 在... -
vue中如何让子组件修改父组件数据
2020-08-27 08:45:19主要介绍了vue中子组件修改父组件数据的相关资料，文中介绍了vue中watch的认识，关于子组件修改父组件属性认识，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下 -
vue子组件向父组件传值（实战）
2019-06-16 21:52:43参考此篇博客：Vue子组件向父组件传值（详讲） 1.首先建立子组件： 1）在components下面建立文件夹getip，在文件夹下建立.vue文件getip.vue，建立.js文件index.js； 2）index.js文件下的代码： import getip from '.... -
vue 子组件向父组件传参，子组件通过$parent调用父组件方法和获取其属性（主动获取父组件的数据和方法）
2019-05-05 18:27:081.子组件通过$emit 向父组件传参 1.1.子组件： <template> <div class="content">...button @click.prevent="child_fun('我是子组件传递到父组件的数据')">调用父组件的方法<... -
Vue子组件监听父组件传值
2019-12-11 09:43:09父组件xiaozhushouInput.vue引用子组件xianshidaan.vue <template> <xianshidaan v-show="!isxsinput" @watchChild="parentReceive" v-bind:searchdatas="searchdatas"></xianshidaan> </... -
vue子组件给父组件传值时接收不到数据
2019-06-12 20:28:46子组件给父组件传值过程中，接收不到数据问题。 -
vue子组件改变父组件传递的prop值，sync实现数据双向绑定
2018-10-25 15:16:39最近开始在用elementUI做一个后台管理系统项目，遇到一个问题，需求是这样，在父组件有一个按钮，点击按钮会显示弹窗（子组件），在子组件中用的是elementUI 的el-diolog弹窗组件，在关闭弹窗时（elementUI自带事件... -
Vue 子组件传父组件 $emit更新属性
2020-03-02 11:46:19$emit(update: prop, “newPropVulue”) => $emit(update: 属性名, “新的属性值”) 例如修改swicth的开关 ...父组件 data() { return { swValue: true, ElementData : [ { date: "2016-05-02", ... -
【vue】vue子组件传值给父组件、以及父组件传值给子组件（vue组件间传值）
2020-10-26 16:42:08vue富文本编辑器（可重复使用组件）vue-quill-editor），由于是新闻编辑页面，首先需要把已经保存好的新闻内容展示在富文本编辑器中（父组件向子组件传值），其次需要把更新后的新闻内容保存到数据库中（子组件向父... -
vue 子组件向父组件传递信息，通知父组件更新视图
2019-03-16 23:16:13// 父组件parent.vue <template> ... } } </script> **数据流动过程**： 子组件点击事件childFunc，通过$emit触发triggerFun, 通知父组件中绑定的triggerFun执行parentFunc，改变父组件的data，更新视图 -
vue组件实现父组件向子组件传值、子组件用父组件的方法、父组件用到子组件数据及方法
2019-10-09 15:18:09要实现此功能应该要先学会vue组件 父组件可以在引用子组件的时候，通过属性绑定（v-bind：）的形式，把需要的传递的值传递给子组件内部，供子组件使用 注意：v-bind：绑定名（随便取，但是要跟子组件里的props里的... -
vue父组件数据更新，子组件没有变化。
2019-09-23 10:25:19vue父组件数据更新，子组件没有变化。 在父子组件传参时，父组件将值传到子组件后，子组件进行数据展示，在第一次传参时可以正常显示，过一段时间后重新赋值，则发现子组件里面数据没有更新，这个时候需要在子组件...
收藏数
163,688
精华内容
65,475
vue
订阅