精华内容
下载资源
问答
  • 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>
    
    展开全文
  • 子组件 修改 父组件 父组件: <template> <parent @change-type="onChangeType"></parent> </template> <script> data () { return { types:...

     子组件 修改 父组件的值  子传父 

    父组件:
        <template>
          <parent @change-type="onChangeType"></parent>
        </template>
        <script>
          data () {
           return {
            types: 0,
          },
          methods: {
           onChangeType (type) { // type是子组件$emit传递的参数值
    
            console.log(type)
            this.types = type
           }
          }
        </script>
    
    子组件:
        <template>
         <div>
          <span @click="changeFn(0)"></span>
          <span @click="changeFn(1)"></span>
          <span @click="changeFn(2)"></span>
         </div>
        </template>
        <script>
          data () {
           return {
            types: 0,
          },
          methods: {
            changeFn (type) {
              this.types = type
              this.$emit('change-type', type) // 用来触发父组件定义的@change-type
           }
          }
        </script>

    父组件 定义 @function  名字  

    子组件 就用什么名字 以 @中名字为主

    传值给 父 

    展开全文
  • vue父组件子组件传值时,其父子prop之间形成单向下行绑定,反过来则不行,这样会防止子组件意外改变父组件,从而数据流变的难以理解;另外,每次父组件的数据发生更新时,子组件的都会刷新到最新的数据,但...
  •  开始没什么问题,页面都摆上去了,但是当我点击进行选择的时候,console控制器抛出异常了,提示我不能在子组件修改父组件传递过来的。  网上查证了一番,原因是父组件子组件传值默认是单向绑定的,不...
  • vue子组件修改父组件的三种方法

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

    万次阅读 2018-02-28 17:50:02
    如何在子组件修改父组件 第一步:首先得保证父组件中有吧 这是userManage.vue data(){ return{ dialogCreate:'false' } } 第二步:在父组件中引用子组件 import Form from './userCreate' 第三...
  • 主要介绍了vue中子组件修改父组件数据的相关资料,文中介绍了vue中watch的认识,关于子组件修改父组件属性认识,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue组件修改父组件传递过来的 这里不再赘述父子组件及子父组件传值,不懂的同学可以翻看我以前写过的关于两者传值的文章 父子组件传值:https://www.cnblogs.com/Sky-Ice/p/9267192.html 子父组件传值:...
  • 本文通过一个demo给大家介绍了vue子组件改变父组件传递的prop通过sync实现数据双向绑定,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 问题:在子组件中直接修改父组件传过来的会报错。 解决方案:将修改后的传给父组件然后在父组件中做修改修改之后子组件就会跟着改变。 父组件: <configure v-else-if="configureBtn==2" v-bind:...
  • vue子组件监听父组件传值

    千次阅读 2020-10-20 13:23:01
    vue子组件监听父组件传值
  • 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}, ...
  • 子组件修改父组件传递的,在组件中使用$emit(‘update:props接收的属性名’,‘修改的’) 组件页面-----》list.vue: <template> <div class="list"> <el-button @click="toShow">显示...
  • vue子组件如何修改父组件

    千次阅读 2019-04-12 14:59:38
    如何在子组件修改父组件 第一步:首先得保证父组件中有吧 这是userManage.vue data(){ return{ dialogCreate:'false' } } 第二步:在父组件中引用子组件 import Form from './userCreate' 第三...
  • vue子组件改变父组件中data的

    万次阅读 2019-03-17 21:19:49
    1.子组件无法直接使用父组件中data的 2.prop是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。 那么改如何在子组件修改父组件的data中变量呢? 既然子组件无法获取父组件的变量,那就...
  • props属性的特点:(单向数据流) 业务中会经常遇到两种需要改变props的情况,一种是父组件传递初始进来,子组件将它作为初始保存起来,在自己的作用域下可以随意使用和修改。这种情况可以在组件data中再声明一...
  • 正常对于vue父子组件来说子组件是不能改变父组件props过来的的,但是今天在做项目的时候发现了一个有意思的事情,子组件是可以直接通过改变props的来改变父组件相对应数据的的。 这里我们将props的的类型...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 87,930
精华内容 35,172
关键字:

vue子组件修改父组件值

vue 订阅