精华内容
下载资源
问答
  • vue子组件更新父组件数据
    千次阅读
    2022-04-19 19:01:12

            因为vue是单项数据流,所以没办法直接在子组件中去修改父组件里面的数据,vue提倡单项数据流,为了防止项目过于复杂时,导致数据流难以理解。引用Vue的官网的话:父系 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父及组件的状态,从而导致你的应用的数据流向难以理解。所以在项目开发过程中,我们总是通过子组件触发父组件中方法的方式,通过父组件的方法,更改父组件的数据。

    一、props传递方法

            通过props的方式,将父组件的方法传递到子组件,在子组件中通过props接收,可以在当前组件的实例上直接触发父组件的方法,从而实现子组件更改父组件的值。同事也可以将子组件的数据,以参数的形式发送给父组件。

    由于代码不多,就暂且全部展示,仅需关心相关事件就可以

    //父组件,设置更改自己数据的方法,将该方法传递给子组件
    <template>
      <div class="home">
        <h1>我是父组件</h1>
        <HelloWorld :msg="msg" :changeMsg="changeMsg"/>
      </div>
    </template>
    
    <script>
    import HelloWorld from '@/components/HelloWorld.vue'
    
    export default {
      name: 'Home',
      components: {
        HelloWorld
      },
      methods:{
        changeMsg(text,num){
          console.log(text,num);
          this.msg=this.msg+1
        }
      },
      data(){
        return{
          msg:1
        }
      }
    }
    </script>
    
    
    
    //子组件,接收父组件传递过来的方法,通过props接收到的方法和数据,在组件实例上可以直接获取和触发
    <template>
      <div class="hello">
        <h1>我是子组件<button @click="changeFatherData">点我更改父组件数据</button></h1>
        <h1>父组件数据:{{msg}}</h1>
        
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      props: {
        msg: Number,
        changeMsg:Function
      },
      data(){
        return{
          text:"我是子组件数据,我要发送给父组件",
          num:12
        }
      },
      methods:{
        changeFatherData(){
          this.changeMsg(this.text,this.num)
        }
      },
    }
    </script>
    
    <style scoped lang="scss">
    
    </style>
    
    

    二、通过this.$emit触发父组件方法实现

            在父组件中自定义一个方法,然后传递给子组件,子组件通过this.$emit直接触发父组件中的数据,实现父子组件通信。子组件触发事件,父组件监听事件。

    //父组件,将定义的方法传递给子元素
    <template>
      <div class="home">
        <h1>我是父组件</h1>
        <HelloWorld :msg="msg" @changeMsg="changeMsg"/>
      </div>
    </template>
    
    <script>
    import HelloWorld from '@/components/HelloWorld.vue'
    
    export default {
      name: 'Home',
      components: {
        HelloWorld
      },
      methods:{
        changeMsg(text,num){
          console.log(text,num);
          this.msg=this.msg+1
        }
      },
      data(){
        return{
          msg:1
        }
      }
    }
    </script>
    
    
    //子组件,通过this.$emit触发父组件方法,更改父组件数据,同时可以进行数据传值
    <template>
      <div class="hello">
        <h1>我是子组件<button @click="changeFatherData">点我更改父组件数据</button></h1>
        <h1>父组件数据:{{msg}}</h1>
        
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      props: {
        msg: Number,
      },
      data(){
        return{
          text:"我是子组件数据,我要发送给父组件",
          num:12
        }
      },
      methods:{
        changeFatherData(){
          this.$emit('changeMsg',this.text,this.num)
        }
      },
    }
    </script>
    
    <style scoped lang="scss">
    
    </style>
    

    三、子组件通过this.$parent直接触发父组件(代码简洁,推荐使用)

            子组件直接触发父组件事件,无需进行方法的传递、接收,以及事件的定义。

    //父组件,声明需要的方法
    <template>
      <div class="home">
        <h1>我是父组件</h1>
        <HelloWorld :msg="msg"/>
      </div>
    </template>
    
    <script>
    import HelloWorld from '@/components/HelloWorld.vue'
    
    export default {
      name: 'Home',
      components: {
        HelloWorld
      },
      methods:{
        changeMsg(text,num){
          console.log(text,num);
          this.msg=this.msg+1
        }
      },
      data(){
        return{
          msg:1
        }
      }
    }
    </script>
    
    
    //子组件,this.$parent直接触发父组件方法
    <template>
      <div class="hello">
        <h1>我是子组件<button @click="changeFatherData">点我更改父组件数据</button></h1>
        <h1>父组件数据:{{msg}}</h1>
        
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      props: {
        msg: Number,
      },
      data(){
        return{
          text:"我是子组件数据,我要发送给父组件",
          num:12
        }
      },
      methods:{
        changeFatherData(){
          this.$parent.changeMsg(this.text,this.num)
        }
      },
    }
    </script>
    
    <style scoped lang="scss">
    
    </style>
    

    四、小陈简介

            哈,好久没更新了,离职状态在认真学习,卑微码农,很高兴你可以看我整理的东西,一起进步,如果对文章有疑问可以评论哈,或者有问题也可以交流。

    更多相关内容
  • vue子组件更新父组件

    千次阅读 2021-10-20 18:36:46
    子组件更新父组件组件定义参数 <template> <view class="prepayment-trial-info"> //这里是需要更新的数据:mailForm.sync="mailForm",将会更新mailForm字段 <user-info-mail :mailForm....

    子组件更新父组件

    父组件定义参数

    <template>
      <view class="prepayment-trial-info">
      		//这里是需要更新的数据:mailForm.sync="mailForm",将会更新mailForm字段
        	<user-info-mail :mailForm.sync="mailForm"></user-info-mail>
      </view>
    </template>
    
    <script>
    import userInfoMail from "../../../components/user-info-mail/user-info-mail.vue"
    export default {
      data() {
        return {
          mailForm: {
            name: "",
          }
        }
      },
      methods: {
      },
      components: { userInfoMail }
    }
    </script>
    
    <style scoped lang="scss">
    .prepayment-trial-info {
     
    }
    </style>
    
    

    子组件定义参数以及更新父组件参数

    <template>
      <view class="user-info-mail">
        <view class="list">
          <view class="item item-border">
            <view class="left"> 收件人:</view>
            <view class="item-right ">
              <input type="text" class="right" placeholder="请输入收件人" v-model.trim="mailForm.name"/>
              <view class="img"></view>
            </view>
          </view>
      </view>
    </template>
    <script>
    export default {
      data() {
        return {
          mailForm:{
            name:"",
          }
        }
      },
      watch:{
        mailForm:{
          handler: function() {
          //深度监听对象 当对象有改动时将更新父组件页面定义的mailForm数据
           this.$emit('update:mailForm',this.mailForm)
         },
         deep: true
        }
      },
      methods:{
      }
    }
    </script>
    
    <style scoped lang="scss">
    .user-info-mail {
    
      }
    }
    </style>
    

    这样当在输入框输入值后,将会用watch监听变化,然后再去更新父组件的值。

    展开全文
  • vue 组件接收父组件数据的方法

    千次阅读 2021-12-30 18:15:21
    vue 组件接收父组件数据的方法

    vue 子组件接收父组件数据的方法
    父组件

    <template>
      <div>
         <Comp :name="dy" :title="title" :id="id"></Comp>
      </div>
    </template>
    <script>
    import Comp from '@/views/dyState/child/comp'
    export default {
      components: { Comp1, Comp2 },
      data() {
        return {
          name: "1",
          title: "2",
          id: "3"
        }
      },
    }
    </script>
    

    子组件

    export default {
      props: {
        name: '',
      },
      mounted() {
        console.log(this.$attrs)
        console.log(this.name)
      },
    }
    

    子组件打印接收数据结果:
    console.log(this.$attrs) // { title:“2”,id:“3” }
    console.log(this.name) // 1

    标题

    总结:父组件通过自定义属性传递数据给子组件,子组件接收时:
    (1),子组件用this. a t t r s 全 部 接 收 , 获 取 到 的 是 所 有 数 据 对 象 ( 2 ) , 子 组 件 中 既 有 p r o p s , 也 有 t h i s . attrs全部接收,获取到的是所有数据对象 (2),子组件中既有props,也有this. attrs(2),propsthis.attrs,则子组件接收到的数据为props接收对应数据,剩下的在this. a t t r s 对 象 中 ; 如 果 父 组 件 只 传 递 了 一 个 数 据 , 则 t h i s . attrs对象中;如果父组件只传递了一个数据,则this. attrs;this.attrs接收到的数据为空## 标题
    (3),子组件全部用props一个一个接收

    展开全文
  • Vue子组件父组件数据方法总结

    千次阅读 2021-12-14 17:02:26
    1.通过父组件子组件传递函数类型的props实现传递数据 在主组件app.vue中 <template> <div> <p>这是父组件</p> <!-- 通过父组件子组件传递函数类型的props实现...

    以下两种子组件给父组件传数据的方式共同点是,都必须配置回调函数

    1.通过父组件给子组件传递函数类型的props实现子给父传递数据

    在主组件app.vue中

    <template>
    	<div>
    		<p>这是父组件</p>
    		<!-- 通过父组件给子组件传递函数类型的props实现子给父传递数据 -->
            <!-- 将getname给my,my.vue中用props声明接收 -->
    		<my :getname="getname"></my>
    	</div>
    </template>
    
    <script>
    	import my from "./components/my.vue"
    	export default {
    	  name: 'App',
    	  components:{
    		  my
    	  },
    	  methods:{
    		  // 定义getname函数,需要接受数据,有入参
    		  getname(name){
    			  console.log('App收到了子组件传过来的数据',name)
    		  }
    	  }
    	}
    </script>
    <style>
    	p{
    		background-color: #FFA500;
    	}
    </style>

    子组件my.vue的代码:

    <template>
    	<div>
    		<p>
    			{{msg}}
    		</p>
    		<!-- 给一个按钮触发传数据给父组件 -->
    		<button @click="sendname">点击把子组件数据传给父组件</button>
    	</div>
    </template>
    
    <script>
    	export default{
    		name:'my',
    		data(){
    			return{
    				msg:"这是子组件"
    			}
    		},
    		props:['getname'],
    		methods:{
    			sendname(){
    				this.getname(this.msg)
    			}
    		}
    	}
    </script>
    
    <style scoped>
    	div,p{
    		background-color: blue;
    	}
    </style>

    运行后点击按钮后控制台可输出:

     

     2.通过父组件给子组件绑定自定义事件实现子给父传递数据

    在主组件app.vue中:

    <template>
    	<div>
    		<p>这是父组件</p>
    		<!-- v-on在my组件标签上,给my的实例组件上绑定了getname事件 -->
    		<my v-on:getname="getmsgname">
    	</div>
    </template>
    
    <script>
    	import my from "./components/my.vue"
    	export default {
    	  name: 'App',
    	  components:{
    		  my
    	  },
    	  methods:{
    		  getmsgname(name){
    			  console.log('App收到了子组件传过来的msg',name)
    		  }
    	  }
    	}
    </script>
    <style>
    	p{
    		background-color: #FFA500;
    	}
    </style>

    在子组件my.vue中:

    <template>
    	<div>
    		<p>
    			{{msg}}
    		</p>
    		<!-- 给一个按钮触发传数据给父组件 -->
    		<button @click="sendname">点击把子组件数据传给父组件</button>
    	</div>
    </template>
    
    <script>
    	export default{
    		name:'my',
    		data(){
    			return{
    				msg:"这是子组件"
    			}
    		},
    		props:['getname'],
    		methods:{
    			sendname(){
    				// 通过组件上的$emit触发my组件实例上的getname事件
    				this.$emit('getname',this.msg)
    			}
    		}
    	}
    </script>
    
    <style scoped>
    	div,p{
    		background-color: blue;
    	}
    </style>

    运行点击按钮后可查看到控制台:

     

     

    展开全文
  • Vue 子组件父组件传值

    千次阅读 2022-04-04 12:45:33
    一、父组件子组件传值 定义父组件名,用iconId给子组件传值 子组件里用props:["icon...PS:父组件子组件传值时,千万不要再子组件里面修改父组件传过来的值,可以使用子组件父组件传值的方法去修改 ...
  • vue 子组件获取父组件传值

    千次阅读 2021-10-28 13:47:03
    父组件 // 记得先引入声明什么的 <Search v-if="search_show" :title="title" /> 子组件设置: export default { props: { title: { type: String, default: "默认值", }, } }; 子组件调用: <div&...
  • 父组件代码↓ <template> <div> <div>父组件</div> <Student :name="name" :age="age"></Student> </div> </template> <script> // 引入组件 ...
  • Vue子组件触发父组件事件

    千次阅读 2020-08-04 15:48:25
    父组件是使用 props 传递数据子组件,但如果子组件要把数据传递回去,就需要使用自定义事件! 我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface),即: 使用 $on(eventName) ...
  • vue子组件父组件传值的三种方式

    万次阅读 2022-04-27 14:35:45
    一、通过父组件子组件传递函数类型的props实现 父组件: <Child :getChildInfo="getChildInfo"></Child> 子组件: <button @click="sendChildInfo"></button> props: ['getChildInfo'] ...
  • vue子组件获取父组件几种方法

    千次阅读 2021-06-15 15:10:45
    //父组件 <template> <div> <child></child> </div> </template> <script> import child from '~/components/dam/child'; export default { components: { child ...
  • 子组件的watch写的不对 添加immediate: true watch: { taskId: { immediate: true, // 必须! handler (val) { ... } } },
  • Vue 子组件父组件之间传值

    千次阅读 2021-07-29 23:23:36
    1.父组件子组件传值props 1.1定义父组件父组件传递msg这个数值给子组件(子组件接收到为msgVal): 1.2定义子组件子组件通过 props方法获取父组件传递过来的值。props中可以定义能接收的数据类型,如果不符合...
  • Vue 子组件修改父组件值的解决方法

    千次阅读 2020-10-21 22:51:30
    此外,每次父组件数据发生更新时,子组件的值都会更新到最新的数据,但不能直接在子组件内部改变prop(父组件传过来的值),否则浏览器就会发出警告 但我们可能会遇到,需要在子组件修改父组件值的需求,这里...
  • Vue子组件父组件传值

    千次阅读 2021-07-23 18:14:17
    Vue组件传值之——组件向组件传值—— 组件传组件:主要通过this.$emit(event,arg) $emit 绑定一个自定义事件event,当这个这个语句被执行到的时候,就会将参数arg传递给组件,组件通过@event监听并接收...
  • 父组件传递给我一个名为deptName数据,但是现在我要在子组件中修改它的值并且实时更新页面,直接this.deptName是不能直接修改他的值的,所以我采用了使用一个中间变量来接受的方式对齐进行修改: 1、父组件: 2、...
  • VUE子组件修改父组件值不更新

    千次阅读 2021-08-16 10:45:23
    关于VUE子组件修改父组件值不更新问题的解决方案 首先父组件通过props传值给子组件的值是无法通过子组件自行修改了,只能使用类似于$emit这样的方法启用触发父组件方法修改,不然会报错 不过通过对象传输给子组件,...
  • 子组件接收父组件方法并获取方法返回值
  • Vue父子组件传值,组件通过props传值给组件,组件触发父组件数据更新组件未更新 一、需求: 组件:是一个数据列表页,需要在获取到列表数据后,将数值传递给组件—展示。 组件:修改对象或数组中的...
  • 文章目录vue中父子组件数据修改的问题前言一、组件能否直接修改组件中传入的数据?如何才能解决父子组件之间数据的双向绑定呢?二、使用步骤1.引入库2.读入数据总结 前言 这篇文章主要针对vue2中的父子组件...
  • vue父组件数据更新组件未更新

    千次阅读 2021-05-28 11:17:52
    父组件数据更新了,但子组件数据并为更新响应视图的变化 解决:在子组件中加入 watch 进行数据监听 父组件 <RiskLevel :level="level" @getVal="getRiskVal"></RiskLevel> ... getRiskVal(val) { ...
  • 谢谢 这篇文章中介绍了三种方法分别为:1、子组件通过使用this.emit('xxx') (xxx:是你要调用的方法名,只要方法名不要后面的小括号)3、父组件把方法名传给子组件,在子组件里调用这个方法 代码如下: 1、子组件通过...
  • vue子组件监听父组件传值

    万次阅读 2020-10-20 13:23:01
    vue子组件监听父组件传值
  • Vue父组件子组件传递子组件实时更新
  • Vue 中子组件访问父组件数据

    千次阅读 2021-02-19 15:00:01
    本文记录了Vue 中子组件如何访问父组件数据以及vue中props的理解
  • vue子组件父组件传递多个参数

    千次阅读 2022-01-17 09:54:51
    父组件中引入子组件时自定义方法,第一个参数使用arguments接收子组件传递过来的所有参数 ...父组件使用方法funtion1(data)接收参数,此时的data为列表,可按顺序存取子组件传递过来的数据 funtion.
  • vue子组件父组件传值的方法

    万次阅读 多人点赞 2019-05-25 13:28:38
    子组件父组件,使用$emit方法,demo: 子组件的代码: <template> <div> <h1>this is child component</h1> <button @click="toParent">向父组件传值</button> </...
  • vue 子组件刷新父组件

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

    千次阅读 2020-11-21 22:53:05
    正常情况下,父组件可以监听子组件传递过来的事件,那么子组件怎么监听父组件的事件呢? 实际案例: 假设子组件是一个弹框表单,子组件里边我预留了一个按钮位置,用于【添加数据】或者【编辑数据】按钮,点击按钮,...
  • 父组件更新子组件一定会重新渲染,但子组件重新渲染只会走它的beforeUpdate和uptated这些周期函数,data不会重新执行,如果刚开始第一次渲染的时候,把属性都挂载到当前组件的data中,只有第一次渲染子组件才会...
  • 思路:在子组件中使用watch来监听数据的变化。 1.父组件子组件传值,将dataMsg传递给子组件 <child :data-msg="dataMsg"></child> 2.子组件props接收dataMsg,watch监听dataMsg的变化 props: { data...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 227,000
精华内容 90,800
热门标签
关键字:

vue子组件更新父组件数据