精华内容
下载资源
问答
  • Vue子组件父组件传值 需要使用自定义事件 流程: 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,并写一个子组件 &lt;compo :foo.sync="active"&gt;&lt;/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:01
    vue子组件监听父组件传值


    父组件通过 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是监听到变化才执行,则导致子组件无初始值。可以采用下面深度监听的写法,开启immediatetrue

    深度监听

    修改下之前的父组件和子组件内容

    // 父组件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, // 初次监听即执行  
      },
    },
    

    这种方式消除深度监听对性能的消耗

    展开全文
  • 上一期通过比较复杂的方式才实现了子组件父组件传递data数据,但是这一次是很简单的方式,利用 ref属性 在子组件里设置ref属性,到时候父组件可以通过ref属性来获取子组件 父组件使用 this.$refs.ref值来...
  • vue 子组件刷新父组件

    千次阅读 2021-01-08 14:05:48
    vue 子组件刷新父组件 1、通过 $emit 触发 //在父组件中设置 @add = "add(val)" //子组件中使用 this.$emit('add', newVal) 2. 使用$parent触发 //子组件直接调用 this.$parent.getList()
  • Vue 子组件修改父组件值的解决方法

    千次阅读 2020-10-21 22:51:30
    此外,每次父组件数据发生更新时,子组件的值都会更新到最新的数据,但不能直接在子组件内部改变prop(父组件传过来的值),否则浏览器就会发出警告 但我们可能会遇到,需要在子组件修改父组件值的需求,这里...
  • 今天小编就为大家分享一篇解决vue 子组件修改父组件传来的props值报错问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue子组件父组件传data数据

    千次阅读 2019-05-08 19:20:01
    Vue中,子组件是怎么向父组件传自己的data数据? 原理:父组件可以通过给子组件绑定虚拟事件来向子组件传递自己的方法,因此这个虚拟事件就装载了父组件的方法,子组件拿到虚拟事件之后进行注册,就可以使用来自...
  • 子组件 props : [“data”], 子组件监听 watch:{ data : (n ,o) =&gt; {//箭头函数 不然会发生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>...
  • 今天再看github上别人的...子组件代码 &lt;template&gt; &lt;div @click="open"&gt;&lt;/div&gt; &lt;/template&gt; 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:33
    vue子组件父组件传值 近期在学习vue,总结了一下子组件父组件间传值的方法: 父组件子组件传值 子组件父组件传值 父组件子组件传值 父组件子组件传递数据主要通过props来进行传递。子组件想...
  • vue子组件父组件传值

    万次阅读 多人点赞 2018-08-21 10:28:12
    子组件: &lt;template&gt;  &lt;div class="app"&gt;  &lt;input @click="sendMsg" type="button" value="给父组件传递值"&gt;  &lt;/...
  • Vue子组件父组件传值 需要使用自定义事件 流程: 1.子组件创建并监听自定义事件, 2.在事件函数里面执行emit函数,通过emit把想传的值传给父组件 3.父组件子组件上监听emit定义的事件名称并绑定自身的函数,在...
  • 方法一(常规) 父组件传递数据子组件子组件数据转成本地数据 props: ['name'], data() { return { ...所以要监听父组件传入数据的变化,随之更新子组件; watch: { // 监听父组件传...
  • Vue子组件获取父组件传递的动态数据为空 当父组件 axjos 获取数据子组件使用 props 接收数据时,执行 mounted 的时候 axios 还没有返回数据,而且 mounted 只执行一次,这时 props 中接收的数据为空 解决办法: 在...
  • 主要介绍了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 '....
  • 1.子组件通过$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> </...
  • 子组件父组件传值过程中,接收不到数据问题。
  • 最近开始在用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-quill-editor),由于是新闻编辑页面,首先需要把已经保存好的新闻内容展示在富文本编辑器中(父组件子组件传值),其次需要把更新后的新闻内容保存到数据库中(子组件...
  • // 父组件parent.vue <template> ... } } </script> **数据流动过程**: 子组件点击事件childFunc,通过$emit触发triggerFun, 通知父组件中绑定的triggerFun执行parentFunc,改变父组件的data,更新视图
  • 要实现此功能应该要先学会vue组件 组件可以在引用组件的时候,通过属性绑定(v-bind:)的形式,把需要的传递的值传递给组件内部,供组件使用 注意:v-bind:绑定名(随便取,但是要跟组件里的props里的...
  • vue父组件数据更新组件没有变化。 在父子组件传参时,组件将值传到组件后,组件进行数据展示,在第一次传参时可以正常显示,过一段时间后重新赋值,则发现组件里面数据没有更新,这个时候需要在组件...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 163,688
精华内容 65,475
关键字:

vue子组件更新父组件数据

vue 订阅