精华内容
下载资源
问答
  • Vue 子组件修改父组件的解决方法

    千次阅读 2020-10-21 22:51:30
    但我们可能会遇到,需要在子组件修改父组件的需求,这里介绍三种方法实现: 实现 方法一:通过$emit派发一个自定义事件,组件收到后,由组件进行修改 组件:接受组件传来的cateId,但是组件

    分析

    vue中父组件向子组件传值时,其父子prop之间形成单向下行绑定,反过来则不行,这样可以防止子组件意外改变父组件的值,怕子组件污染父组件,造成不可控; 此外,每次父组件的数据发生更新时,子组件的值都会更新到最新的数据,但不能直接在子组件内部改变prop(父组件传过来的值),否则浏览器就会发出警告

    但我们可能会遇到,需要在子组件修改父组件值的需求,这里介绍三种方法实现:

    实现

    方法一:通过$emit派发一个自定义事件,父组件收到后,由父组件进行修改

    子组件:接受父组件传来的cateId值,但是子组件使用本身的计算属性myCateId进行绑定和修改,一旦值发生改变,便通过向上提交函数this.$emit('changeCate', val)向父组件提交

    <!-- 注意子组件里是绑定的计算属性,不是父组件传来的prop里的值 -->
    <treeselect
      v-model="myCateId"
      :options="cates"
      :load-options="loadCates"
      placeholder="请选择类别"
    />
    
    export default {
    	props: {
    		cateId: {
    			type: Number,
    			default: null
    		}
    	},
    	data() {
    		return {
    		  cates: [] // 类别列表
    		}
    	},
    	computed: {
    		myCateId: {
    			get() {
    			  return this.cateId
    			},
    			set(val) {
    			  this.$emit('changeCate', val)
    			}
    		}
    	}
    }
    

    父组件:引用子组件,并定义改变函数,接受子组件传来的改变值对本身的值进行修改

    <!-- 父组件引用子组件 -->
    <CateSelect
    	:cate-id="form.categoryId"
    	style="width: 370px;"
    	@changeCate="changeCate"
    />
    
    changeCate(val) {
      this.form.categoryId = val
    },
    
    方法二:只要prop是对象或者数组,在子组件里面就可以修改从而改变父组件的值

    在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。

    父组件:引用子组件,定义引用类型数据并传递到子组件

    <preview :pre="pre" />
    
    data() {
     return {
        pre: {
          isShow: false,
          flName: '',
          flType: ''
        }
      }
    },
    

    子组件:直接修改父组件传来的引用类型数据,则父组件的数据也会被修改

    <div @click="changePre"></div>
    
    props: {
      pre: {
        // 控制该组件是否显示
        isShow: {
          type: Boolean,
          default: false
        },
        // 浏览文件名(服务器存储的加上UUID的文件名)
        flName: {
          type: String,
          default: null
        },
        // 浏览文件类型,true为图片,false为文档
        flType: {
          type: String,
          default: false
        },
        type: Object,
        default: null
      }
    },
    methods: {
      changePre() {
        this.pre.isShow = true
      }
    }
    

    建议

    注意:虽然有两种方法可以实现子组件修改父组件值,但是官方是不推荐在子组件内修改通过prop传入的父组件的值,推荐使用vuex

    展开全文
  • 今天小编就为大家分享一篇解决vue 子组件修改父组件传来的props报错问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue 子组件修改父组件props wangEditor

    千次阅读 2019-03-30 08:59:58
    首先说点题外话,子组件修改父组件的,这个内容很多人都写过,但是很大一部分是基于 Vue2.0 写的,需要在组件中专门定义一个方法/函数,很是麻烦。今天仔仔细细把官方文档看了一下,有了今天这篇博客。 首先这...

    首先说点题外话,子组件修改父组件的值,这个内容很多人都写过,但是很大一部分是基于 Vue2.0 写的,需要在父组件中专门定义一个方法/函数,很是麻烦。今天仔仔细细把官方文档看了一下,有了今天这篇博客。


    首先这个wangEditor是使用比较广泛的一个开源富文本编辑器,对于输入内容不复杂的需求来说非常棒。

    这里是它的官网http://www.wangEditor.com

    这个组件可以直接套在wangEditor上,而且是符合Vue的开发规范的,待会我会提到。


    首先是需求分析

    1. 要有初始化的功能,即用户可以接着之前的内容继续编辑
    2. 这个组件要在很多地方用到,例如评论、写博客,要尽可能易用
    3. 逻辑清晰,符合开发规范,易于维护

    下面来看关键代码

    下面的代码命名规则是下划线命名

    父组件中使用子组件:

    <wang-editor
    	:init_content="advice"
    	@update:content="advice=$event">	
    </wang-editor>

    父Vue对象:

    new Vue({
    	el:"#main-container",
    	data:{
    		advice:String()
    	}
    });

    子组件关键代码:

    props:{
    	// 初始化内容
    	init_content:{
    		default: String()
    	},
    },
    data:function(){
    	return {
    		content:this.init_content
    	}
    },

    父组件中不需要定义任何方法即可实现子组件修改父组件的值

    为什么不把初始化的值直接传给content?

     根据 Vue 的文档

    所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。

    额外的,每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。

    https://cn.vuejs.org/v2/guide/components-props.html#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81

    Vue 官方建议修改组件自身的数据而非 props 中的数据,将 prosp 中的数据作为初始值传给 data 才是符合 Vue 开发规范的。


    最后附上这个 <wang-editor> 组件代码

    // wangEditor菜单配置参数
    const menu_config=[
    	"head",  // 标题
        "bold",  // 粗体
        "fontSize",  // 字号
        "fontName",  // 字体
        "italic",  // 斜体
        "underline",  // 下划线
        "strikeThrough",  // 删除线
        "foreColor",  // 文字颜色
        "backColor",  // 背景颜色
        "link",  // 插入链接
        "list",  // 列表
        "justify",  // 对齐方式
        "quote",  // 引用
        "image",  // 插入图片
        "emoticon",  // 表情
        "table",  // 表格
    	"undo",  // 撤销
    	"redo"  // 重复
    ];
    
    Vue.component("wang-editor",{
    	props:{
    		// 初始化内容
    		init_content:{
    			default: String()
    		},
    	},
    	data:function(){
    		return {
    			content:this.init_content,
    			language_config:LANGUAGE.WANG_EDITOR,
    			init_time:new Date(),
    			random:Math.random().toString().replace(".","")
    		}
    	},
    	methods:{
    		getId:function(){
    			return "wang-editor-"+this.init_time.getMinutes()+this.init_time.getSeconds()+this.init_time.getMilliseconds()+this.random;
    		}
    	},
    	template:'\
    		<div class="wang-editor my-2"\
    			:id="getId()"></div>\
    	',
    	watch:{
    		"content":function(new_value){
    			// 一旦用户改变其中的内容就向父组件通讯
    			this.$emit("update:content",new_value);
    		}
    	},
    	mounted:function(){
    		let _this=this;
    		// 实例化富文本编辑器
    		let editor = new wangEditor("#"+_this.getId());
    		// 设置语言
    		editor.customConfig.lang=_this.language_config;
    		// 自定义参数
        	editor.customConfig.menus = menu_config;
        	// 图片上传地址
        	editor.customConfig.uploadImgServer = URL.BASE.IMG_UPLOAD;
        	// 隐藏“网络图片”tab
    		editor.customConfig.showLinkImg = false;
    		// 配置表情
    		editor.customConfig.emotions = [
    	        {
    	            // tab 的标题
    	            title: "emoji",
    	            // type -> 'emoji' / 'image'
    	            type: "emoji",
    	            // content -> 数组
    	            content: ["?","?","?","?","?",
    	            		"?","?","?","?","?",
    	            		"?","?","?","?","?",
    	            		"?","?","?","?",
    	            		"?","?","?","?","?",
    	            		"?","?","?","?","?",
    	            		"?","?","?","?","?",
    	            		"?","?","?","?","?",
    	            		"?","❤","?‍❤️‍?‍?","?","?",
    	            		"?","?","?","?","?",
    	            		"?","?","✈","?","?",
    	            		"?","?‍♀️","?‍♀️","?","?",
    	            		"?","?","?‍❤️‍?‍?","?","?"]
    	        }
    	    ];
        	// 自定义z-index
        	editor.customConfig.zIndex = 1;
        	// 内容改变监听
    	    editor.customConfig.onchange = function () {
    	    	_this.content=editor.txt.html();
    	    };
    	    // 生成富文本编辑器
    		editor.create();
    		// 初始化内容
    		editor.txt.html(_this.content);
    	}
    });

     

     

    展开全文
  • vue子组件修改父组件中的

    千次阅读 2020-06-03 10:46:33
    使用v-model传值,在子组件中 ,使用value接收 ,在子组件中 触发input方法 就可修改父组件传递过来的参数 <!-- 父组件 --> <template> <div> <Child v-model="show"></Child> &...
    • 使用v-model传值,在子组件中 ,使用value接收 ,在子组件中 触发input方法 就可修改父组件传递过来的参数
    <!-- 父组件 -->
    <template>
        <div>
            <Child v-model="show"></Child>
        </div>
    </template>
    <script>
        export default {
            data() {
                return {
                    show: false
                }
            }
        }
    </script>
    
    <!-- 子组件 -->
    <script>
      export default {
        props: {
          value: {
            type: Boolean,
            default: false
          }
        },
        methods:{
          changeValue(){
            this.$emit('input', true) // 父组件中的show会被更改成true
          }
        }
      }
    </script>
    
    • 使用.sync 修饰符 给组件传值的时候 使用.sync修饰符 子组件就可以同步修改父组件内容(.sync在2.0以后被移除,之后 从 2.3.0 起又重新引入了 .sync 修饰符,但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。)
    <!-- 父组件 -->
    <template>
      <div>
        <Child show.sync="show"></Child>
        <!-- 会被扩展成 -->
        <!-- <Child :show="bar" @update:show="val => bar = val"></Child> -->
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            show: false
          }
        }
      }
    </script>
    
    <!-- 子组件 -->
    <script>
      export default {
        props: {
          show: {
            type: Boolean,
            default: false
          }
        },
        methods:{
          changeValue(){
            this.$emit('update:show', true) // 父组件中的show会被同步更改成true
          }
        }
      }
    </script>
    
    展开全文
  • vue父组件子组件传值时,其父子prop之间形成单向下行绑定,反过来则不行,这样会防止子组件意外改变父组件,从而数据流变的难以理解;另外,每次父组件的数据发生更新时,子组件的都会刷新到最新的数据,但...

    最近在前端项目中遇到了父子组件传值的问题...

    vue中父组件向子组件传值时,其父子prop之间形成单向下行绑定,反过来则不行,这样会防止子组件意外改变父组件的值,从而数据流变的难以理解;另外,每次父组件的数据发生更新时,子组件的都会刷新到最新的数据,但不能改变子组件内部改变prop,这样浏览器就会发出警告

    解决办法来啦

    解决办法一、子组件想要修改时,需要通过$emit派发一个自定义事件,父组件收到后,由父组件进行修改

    子组件在computed中,

    computed:{
      currentActiveNames: {
       get() {
        return this.activeNames //父组件传给子组件的值
       },
       set(val) {
        // 改变由父组件控制
        this.$emit('on-change-activeNames', val)   
       }
      }
    }

    这样子组件告诉父组件自己修改了父组件传过来的值

    接下来呢,父组件中在引用子组件的地方添加@on-change-activeNames="changeActiveNames",另外,在methods方法中定义changeActiveNames用来接收父组件传过来的值

    methods:{
     changeActiveNames(val){
      console.log(‘子组件传过来的值’,val)
     }
    }

    解决办法二、

    注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。

    大概意思就是:只要prop是对象或者数组,在子组件里面就可以修改从而改变父组件的值

    那具体要怎么写呢...

    1. 父组件中引入子组件 <child :par-obj="parObj"><child/>  child为子组件的名称(这里提一下 子组件名若为驼峰式,父组件引用的时候用‘-’连接 例如子组件名称为 childCom 引用时则用child-com)

    2. parObj为传给子组件的对象,在data中定义 重点来啦....在data中可以这样定义

    parObj:{ 
        parVal: 1
    },

    这样palVal才是你需要真正传给子组件的值

    3. 在子组件中

    props: {
      parObj: {
        type: Object,
        default: null
      }
    },

    拿到parObj后,子组件就可以肆意的改变parObj对象中的parVal啦

     

    展开全文
  • vue子组件修改父组件的三种方法

    万次阅读 2018-10-31 10:28:43
     最常用的一种方法,父组件通过v-on绑定一个事件,在事件中修改自己的子组件通过$emit触发该事件 在子组件MobileMessage中: 这种方法有个好处就是可以在父组件的事件里面做一些额外的处理,...
  • Vue子组件调用父组件的方法

    万次阅读 多人点赞 2019-09-03 22:03:43
    Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <template> <div> <child></child> </div&...
  • Vue子组件父组件传值 需要使用自定义事件 流程: 1.子组件创建并监听自定义事件, 2.在事件函数里面执行emit函数,通过emit把想传的传给父组件 3.父组件子组件上监听emit定义的事件名称并绑定自身的函数,...
  • vue子组件修改父组件的

    万次阅读 2018-02-28 17:50:02
    如何在子组件修改父组件 第一步:首先得保证父组件中有吧 这是userManage.vue data(){ return{ dialogCreate:'false' } } 第二步:在父组件中引用子组件 import Form from './userCreate' 第三...
  • (1)vue父组件调用子组件函数 用法: 子组件上定义ref="refName", 父组件的方法中用 this.$refs.refName.method 去调用子组件方法 详解: 父组件里面调用子组件的函数,父组件先把函数/方法以属性形式传给子组件...
  • Vue子组件父组件传值(this.$emit()方法)

    万次阅读 多人点赞 2018-08-13 19:10:46
    子组件使用this.$emit()向父组件传值 首先必须在父组件中引用子组件,然后实现传值 第一步 在父组件中引入子组件 使用import引入组件 import indexImportOrder from './components/indexImportOrder' 声明 ...
  • vue子组件监听父组件传值

    千次阅读 2020-10-20 13:23:01
    vue子组件监听父组件传值
  • 问题:在子组件中直接修改父组件传过来的会报错。 解决方案:将修改后的传给父组件然后在父组件中做修改修改之后子组件就会跟着改变。 父组件: <configure v-else-if="configureBtn==2" v-bind:...
  • vue子组件直接修改父组件

    千次阅读 2020-06-12 15:07:21
    但是我发现子组件可以直接修改父组件传递的引用类型中的属性。 这个是父组件login ```javascript <template> <div class="login"> <son :data1="number"/> </div> </template> &...
  • vue3 子组件修改父组件的

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

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

    万次阅读 2019-02-15 17:07:48
    如图:选择城市后,页面重新请求...第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <template> <div> <child></child> </div> </template>...
  • vue子组件父组件传值

    万次阅读 多人点赞 2018-08-21 10:28:12
    子组件: &lt;template&gt;  &lt;div class="app"&gt;  &...给父组件传递"&gt;  &lt;/div&gt; &lt;/template&gt; &lt;script&gt
  • Vue子组件父组件传值 需要使用自定义事件 流程: 1.子组件创建并监听自定义事件, 2.在事件函数里面执行emit函数,通过emit把想传的传给父组件 3.父组件子组件上监听emit定义的事件名称并绑定自身的函数,在...
  • vue子组件改变父组件中data的

    万次阅读 2019-03-17 21:19:49
    1.子组件无法直接使用父组件中data的 2.prop是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。 那么改如何在子组件修改父组件的data中变量呢? 既然子组件无法获取父组件的变量,那就...
  • vue子组件如何修改父组件

    千次阅读 2019-04-12 14:59:38
    如何在子组件修改父组件 第一步:首先得保证父组件中有吧 这是userManage.vue data(){ return{ dialogCreate:'false' } } 第二步:在父组件中引用子组件 import Form from './userCreate' 第三...
  • 正常对于vue父子组件来说子组件是不能改变父组件props过来的的,但是今天在做项目的时候发现了一个有意思的事情,子组件是可以直接通过改变props的来改变父组件相对应数据的的。 这里我们将props的的类型...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 348,846
精华内容 139,538
关键字:

vue子组件如何修改父组件的值

vue 订阅