精华内容
下载资源
问答
  • 下面小编就为大家分享一篇vue2.0 子组件改变props,并向父组件传值的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue不推荐直接在子组件中修改父组件传来的props的,会报错 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or...
  • 主要介绍了vue父组件触发事件改变子组件的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 本文通过一个demo给大家介绍了vue子组件改变父组件传递的prop通过sync实现数据双向绑定,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 本篇文章主要介绍了vuejs2.0子组件改变父组件的数据实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue — 子组件改变父组件属性的几种方法 dev7 1,props配合$emit改变父组件传入的 //父组件 <my-input :wranning.sync="wranning" /> //组件 $emit('update:wranning',val) 在父组件传入时,需要...

    Vue — 子组件改变父组件属性值的几种方法

    dev7

    1,props 配合 $emit 改变父组件传入的值

    //父组件
    <my-input :wranning.sync="wranning" />
    
    //组件
    $emit('update:wranning',val)
    
    • 在父组件传入值时,需要有xxx.sync修饰符;
    • 子组件可以在$emit('update:xxxx',val),派发事件修改传入的值;

    2,v-model配合input事件

    //父组件:
    <template>
      <parent v-model="onChangeType"></parent>
    </template>
    
    //子组件:
    <template>
      <div>
        <span @click="changeFn(0)"></span>
      </div>
    </template>
    
    <script>
      data () {
        return {
      },
      methods: {
        changeFn (type) {
              this.$emit('input', type) // 用来触发父组件定义的@input
        }
      }
    </script>
    
    • v-model原则上也是利用$emit以及$on
    • v-model会默认绑定input事件
    展开全文
  • 子组件改变父组件,会报错。其实是采用单向数据流,子组件不能直接改变父组件的,是以单向数据流的方式流转数据。可以采用以下两种减少代码量的方式改变父组件的(忽略on和emit事件方式)。 方法一::xx....

    子组件改变父组件的值,会报错。其实是采用单向数据流,子组件不能直接改变父组件的值,是以单向数据流的方式流转数据。可以采用以下两种减少代码量的方式改变父组件的值(忽略on和emit事件方式)。
    方法一::xx.sync 和 $emit(‘update:xx’)

    Vue.component('child', {
        props: ['selected'],
        template: `
        <div style="border: 1px solid gray;">
          <div>{{selected}}</div>
          <button @click="$emit('update:selected', 1)">Button 1</button>
          <button @click="$emit('update:selected', 2)">Button 2</button>
        </div>
        `
    })
    new Vue({
        el: '#app',
        data() {
        return {
          value: 1
        }
        },
        template: `
        <child :selected.sync="value"></child>
        `
    })
    

    <child :selected.sync="value"></child>
    等价于
    <child :selected="value" @update="selected=$event"></child>
    方法二:使用v-model 和$emit(‘input’)

    Vue.component('child', {
      props: ['value'],
      template: `
        <div style="border: 1px solid gray;">
          <div>{{value}}</div>
          <button @click="$emit('input', 1)">Button 1</button>
          <button @click="$emit('input', 2)">Button 2</button>
        </div>
      `
    })
    new Vue({
      el: '#app',
      data() {
        return {
          value: 1
        }
      },
      template: `
        <child v-model="value"></child>
      `
    })
    
    展开全文
  • 特别是当子组件使用了某些第三方 UI 组件库的时候,在子组件内进行了 v-model 双向绑定,而该又需父组件传入 props 进行依赖,于是当第三方组件事件被触发导致 v-model 发生改变,就产生了冲突,因为此时父级...

    前言

    很多情况下,我们更需要传入子组件 props 的值(也就是父组件中的值)是一个双向的,也就是说子组件更改时,父组件也伴随更改。

    特别是当子组件使用了某些第三方 UI 组件库的时候,在子组件内进行了 v-model 双向绑定,而该值又需父组件传入 props 进行依赖,于是当第三方组件事件被触发导致 v-model 值发生改变,就产生了冲突,因为此时父级传入的 props 不可更改。

    下面简单说明三种解决的方法。

    v-bind:sync

    这是官网推荐的方法,当子组件需要更改父级传入的 props 时,调用 this.$emit() 即可。

    example

    父组件 App.vue

    <template>
      <div id="app">
        <Child :text.sync="text"></Child>
      </div>
    </template>
    
    <script>
    import Child from "@/components/Child";
    export default {
      name: "App",
      components: {
        Child
      },
      data() {
        return {
          text: 123
        };
      }
    };
    </script>
    

    子组件 Child.vue

    <template>
      <div>
        {{ text }}
      </div>
    </template>
    
    <script>
    export default {
      props: {
        text: {
          type: [Number, String]
        }
      },
      mounted() {
        // × 当使用 .sync 时不能对父组件传来的 props 直接赋值
        // this.text = "111";
        
        // √ 需要使用 this.$emit 进行更新父组件传入的 props
        this.$emit("update:text", "111");
      }
    };
    </script>
    

    官网关于 .sync 的更多介绍:.sync 修饰符

    缺点

    正如前言所说,假如我们使用了第三方的组件库,他的 v-model 改变是不受控的,类似与下面这种情况:

    <template>
      <div>
        <input type="text" v-model="text" />
      </div>
    </template>
    

    此时我们父组件传入的 text 会被 v-model 自动更改导致报错(不能直接更改),这是一个很大的麻烦。

    注:虽然组件库都有 v-model 的值被更改事件,但这还需要引入其他变量写很多逻辑,令人难以理解,这不是我们期望的。

    Object props

    通过 Vue2 的设计漏洞——对 object 和 array 内的值变更不做监测,我们直接将 props 传入 object 即可。

    父组件 App.vue

    <template>
      <div id="app">
        <Child :obj="obj"></Child>
      </div>
    </template>
    
    <script>
    import Child from "@/components/Child";
    export default {
      name: "App",
      components: {
        Child
      },
      data() {
        return {
          obj: { key: "value" }
        };
      }
    };
    </script>
    

    子组件 Child.vue

    <template>
      <div>
        <!-- 不会报错,正常使用 -->
        <input type="text" v-model="obj.key" />
        {{ obj }}
      </div>
    </template>
    
    <script>
    export default {
      props: {
        obj: {
          type: Object
        }
      },
      mounted() {
      	// 同步支持设定新属性
      	this.obj.key2 = 'value2'
      	// 异步必须使用 Vue.$set
        setTimeout(() => {
          this.$set(this.obj, "key3", "value3");
        }, 3000);
      }
    };
    </script>
    

    我们需要绑定的就是 object 的某个值,当 object 内的某个键值被改变,不会产生报错,即使在 v-model 双向绑定下也可正常使用。

    特别需要注意的是,当进行异步操作时需要使用 $set() 方法,否则不会触发视图更新。

    Array props

    同上 object props 所说,array 的某一项值改变也不会被 Vue2 监测到。

    父组件 App.vue

    <template>
      <div id="app">
        <Child :array="array"></Child>
      </div>
    </template>
    
    <script>
    import Child from "@/components/Child";
    export default {
      name: "App",
      components: {
        Child
      },
      data() {
        return {
          array: [1, 2, 3]
        };
      }
    };
    </script>
    

    子组件 Child.vue

    <template>
      <div>
        <input type="text" v-model="array[0]" />
        {{ array }}
      </div>
    </template>
    
    <script>
    export default {
      props: {
        array: {
          type: Array
        }
      },
      mounted() {
       	// 同步支持设定新属性
      	this.array[1] = 'value2'
      	// 异步必须使用 Vue.$set
        setTimeout(() => {
          this.$set(this.array, 2, "value3");
        }, 3000);
      }
    };
    </script>
    

    总结

    综上来看,在父子组件的数据流中,建议将可能会双向同步更新的数据放入一个 object 内,务必注意当异步时需要使用 $set() 方法。

    展开全文
  • vue3 子组件修改父组件

    千次阅读 2021-04-25 17:02:49
    父组件 <div> <!-- 子组件 --> <childDiv v-model='userName'></childDiv> <div> ... <script> import childDiv from 'xxxx' export default { components: {childDiv}, ...

    方式一

    • 父组件
    <div>
    	<!--  子组件  -->
    	<childDiv v-model='userName'></childDiv>
    <div>
    ...
    <script>
    import childDiv from 'xxxx'
    export default {
    	components: {childDiv},
    	data(){
    		return {
    			userName:'张三'
    		}
    	}
    }
    </script>
    
    • 子组件 childDiv
    <div>{{modeValue}}</div>
    <script>
    export default {
    	components: {},
    	props:{
    		modeValue:'李四'
    	}
    	data(){
    		return {
    			
    		}
    	},
    	methods:{
    		updateUserName(){
    			this.$emit('update:modelValue', '王五')
    		}
    	}
    }
    </script>
    
    展开全文
  • React 子组件改变父组件

    千次阅读 2019-12-26 14:55:12
    可以通过父组件子组件传值得方式 父组件中定义一个函数 // 这边需要注意一点,需要在父组件的 constructor 中改变一下该函数的 this 指向 // 用的是 this.addTodo = this.addTodo.bind(this) bind 改变 this 的...
  • Vue 子组件修改父组件值的解决方法

    千次阅读 2020-10-21 22:51:30
    vue中父组件向子组件传值时,其父子prop之间形成单向下行绑定,反过来则不行,这样可以防止子组件意外改变父组件,怕子组件污染父组件,造成不可控; 此外,每次父组件的数据发生更新时,子组件都会更新到...
  • props配合$emit改变父组件值 子组件 html: &amp;amp;amp;lt;el-button @click=&amp;amp;quot;$emit('update:showDlg',false)&amp;amp;quot;&amp;amp;amp;gt; 取消 &amp;
  • 父组件 import React , { useState ,createContext ,useContext} from 'react'; import Zi from './zi' // 创建上下文 export const NumContext = createContext(); function Fu (){ const [ num ,setNum ] = ...
  • vue—子组件如何修改父组件

    千次阅读 2019-04-12 14:59:38
    如何在子组件中修改父组件 第一步:首先得保证父组件中有吧 这是userManage.vue data(){ return{ dialogCreate:'false' } } 第二步:在父组件中引用子组件 import Form from './userCreate' 第三...
  • 其中menuData是传递给子组件 ,name对应的方法是子组件传过来的 <Left :mData="menuData" @name="nameChange($event)" /> js中 data() { return { leftFlag: false, menuData: [{ title:'修改...
  • Vue解决父子组件传值,子组件改变值父组件也改变的问题
  • vue—子组件修改父组件

    万次阅读 2018-02-28 17:50:02
    如何在子组件中修改父组件 第一步:首先得保证父组件中有吧 这是userManage.vue data(){ return{ dialogCreate:'false' } } 第二步:在父组件中引用子组件 import Form from './userCreate' 第三...
  • vue子组件改变父组件中data的

    万次阅读 2019-03-17 21:19:49
    1.子组件无法直接使用父组件中data的 2.prop是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。 那么改如何在子组件中修改父组件的data中变量呢? 既然子组件无法获取父组件的变量,那就...
  • 所谓的子传父,其实还是父组件要改变自己的状态,只不过是父组件把改变自己状态的携带参数的方法传递给了子组件,让子组件调用这个方法,来改变父组件的状态。 先看效果图: 案例代码: import React, { Component...
  • 父组件 子组件: 报错: 父组件中的itemArr也是上级传下来了,知道是由于v-moel不能绑定单向数据导致的,但是不知道如何解决
  • React父子组件通信,父组件向子组件传值,子组件改变父组件数据。 1.父组件TodoList 在getItems()函数中调用子组件 通过属性的形式向子组件传值 content={value} 向子组件传递方法 delFunc={this....
  • vue中父组件向子组件传值时,其父子prop之间形成单向下行绑定,反过来则不行,这样会防止子组件意外改变父组件,从而数据流变的难以理解;另外,每次父组件的数据发生更新时,子组件的都会刷新到最新的数据,但...
  • 我们要监听一个属性的的变化就使用watch一般是父组件传递给子组件的时候 •1、常见的使用场景 ... watch:{ value(val) { console.log(val); this.visible = val; } } ... •2、如果要一开始就执行 ... watch:...
  • React子组件修改父组件数据

    千次阅读 2019-12-16 12:51:52
    子组件: class LookDetail extends Component { constructor(props,context) { super(props,context) this.state = {}; } back=()=>{// 子组件的点击事件 this.props.changeData() // 这个changeData()...
  • 正常对于vue父子组件来说子组件是不能改变父组件props过来的的,但是今天在做项目的时候发现了一个有意思的事情,子组件是可以直接通过改变props的改变父组件相对应数据的的。 这里我们将props的的类型...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 72,879
精华内容 29,151
关键字:

子组件改变父组件的值