精华内容
下载资源
问答
  • 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 子组件修改父组件传来的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 ...

    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 computed property based on the prop's value. Prop being mutated: "result" (found in component )

     

     <input v-model="currentSearch" type="text" class="input-search" @keydown.enter="doSearch">

     

    export default {
        name:"round-search-bar",
        props:['search'],    //父组件传来的值
        data(){
            return {
                currentSearch: this.search    //通过data, 定义新变量currentSearch, 这样currentSearch的值变更时,不会影响父组件传来的search的值
            }
        },
        methods: {
            doSearch(){
                Util.searchAPI(this.$router,this.currentSearch)
            }
        },
    }

     

    转载于:https://www.cnblogs.com/qq254980080/p/10331161.html

    展开全文
  • 目的是为了阻止子组件影响父组件的数据那么在vue2.0之后 如何在子组件修改父组件props传过来的值呢?思路是通过子组件$emit发射一个方法 如下: this.$emit('imgDataCallback', callbackUrl); 在父组件使用子组件的...

    从vue1.0升级至2.0之后 prop的.sync被去除 因此直接在子组件修改父组件的值是会报错的如下:

     

    目的是为了阻止子组件影响父组件的数据
    那么在vue2.0之后 如何在子组件修改父组件props传过来的值呢?
    思路是通过子组件$emit发射一个方法  如下:

    this.$emit('imgDataCallback', callbackUrl);

    在父组件使用子组件的地方用v-on绑定这个自定义事件 如下:

     

    然后在父组件定义这个方法

     //获取imgurl
            getImgData: function(obj) {
                console.log(obj);
                this.addForm.bannerImg = obj;
            },

     

    虽然这种方式可以修改父组件数据,但是官方是不推荐在组件内修改通过props传入的父组件数据,而是推荐使用vuex

    本人vuex用的比较菜

     

    转载于:https://www.cnblogs.com/zhaozhenzhen/p/9275418.html

    展开全文
  • 第一种:父组件使用 v-if 调起子组件 <!-- 编辑地址 --> <div v-if="editDialogVisible"> <EditAddress :editData="editData" :editDialogVisible="editDialogVisible" @closeEditDialog=...

    第一种:父组件使用 v-if 调起子组件

    <!-- 编辑地址 -->
    <div v-if="editDialogVisible">
      <EditAddress :editData="editData" :editDialogVisible="editDialogVisible" @closeEditDialog="closeEditDialog"></EditAddress>
    </div>
    

    子组件接收值:

    props: {
      editDialogVisible: {
        type: Boolean,
        default: false
      },
      editData: {
        type: Object
      }
    },
    

    方法①:在 created 中更改数据

    created() {
      console.log('传值', this.editData)
    }
    

    方法②:使用 computed 计算属性更改数据 ( data 里不需要定义 addrForm)

    computed: {
      addrForm() {
        console.log('父组件传过来的值:', this.editData)
        return this.editData
      }
    },
    

    第二种:父组件使用 v-show 来调起子组件

    父组件:

    <!-- 编辑地址 -->
    <div v-show="editDialogVisible">
      <EditAddress :editData="editData" :editDialogVisible="editDialogVisible" @closeEditDialog="closeEditDialog"></EditAddress>
    </div>
    

    子组件

    props: {
      editDialogVisible: {
        type: Boolean,
        default: false
      },
      editData: {
        type: Object
      }
    },
    data(){
      return {
        // 传过来的值经改变之后再赋值给 addrForm
        addrForm: {
          name: '',
          phone: '',
          address: '',
          area_id: '',
          status: '',
          id: ''
        },
      }
    },
    

    使用 watch 监听
    写法①:

    watch: {
      editData(newVal, oldVal) {
        console.log('传过来的值', newVal)
      }
    },
    

    写法②:

    watch: {
      editData: {
        handler() {
          console.log('传过来的值', this.editData)
        },
        deep: true
      }
    },
    
    展开全文
  • 1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件 修改后: 父组件 //html <tree-list :typeList="typeList" :subTypeList="subTypeList" @showSubType=...
  • vue是单向数据流,父组件通过props传值给子组件,如果在子组件修改会报错,一般是不在子组件修改props的,但偶尔有需要在子组件修改props,这里介绍三种可以修改组件props的方法。 1.父组件用sync修饰,...
  • 父组件可以使用 props 把数据传给子组件子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 举例: 子组件: <...
  • props属性的特点:(单向数据流) 业务中会经常遇到两种需要改变props的情况,一种是父组件传递初始值进来,子组件将它作为初始值保存起来,在自己的作用域下可以随意使用和修改。这种情况可以在组件data中再声明一...
  • Vue中,如果父组件子组件传的是数组或者对象这些引用类型,那么子组件可以通过props属性与父组件同步数据。 var vm = new Vue({ el: '#app', data: { // caseInfo zhifarenyuan: {}, // 执法人员 weifainfo...
  • 5、如果子组件修改来自父组件的值,不能直接修改,要通过事件进行修改首先子组件中点击事件绑定方法,方法调用$emit()事件,通过这个方法发送请求给父组件,同时这个方法有两个参数,第一个是方法名(此方法名在...
  • vue1.0升级至2.0之后 prop的.sync被去除 因此直接在子组件修改父组件的值是会报错的 目的是为了阻止子组件影响父组件的数据那么在vue2.0之后 如何在子组件修改父组件props传过来的值呢?思路是通过子组件$emit发射...
  • vue 子组件修改props中的值

    万次阅读 2018-11-01 15:53:53
    问题:子组件修改父组件传来的值(props中的值)。普通的修改会报错,因为这个值是单向的,只能传进来,要是想修改就要用v-model 解决办法:用v-model 写个简单粗暴例子: 父组件 &lt;control :...
  • 子组件修改父组件传递的值,在子组件中使用$emit(‘update:props接收的属性名’,‘修改的值’) 父组件页面-----》list.vue: <template> <div class="list"> <el-button @click="toShow">显示...
  • -- 父组件 --> <template> <div> <my-component ref="myComponent" :id="curId" /> </div> </template> <script> export default { data(){ return { ...
  • vue 子组件获取并修改父组件的数据 父组件在使用子组件的时候,可以通过动态绑定属性值,将数据传递给子组件<date :start_date="start_date" :end_date="end_date"></date> 子组件通过 props 接收父...
  • Vue崇尚单向数据流,本来不应该直接修改的,.sync这个黑科技可以直接改 <navBar :names.sync="names"> </navBar> //编译时会被扩展为 <navBar :names="names" @update:names="val => names =...
  • VUE父组件子组件间使用props方式传递数据,但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态。场景:子组件通过props获取父组件传过来的数据,子组件存在操作传过来的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 480
精华内容 192
关键字:

vue子组件修改父组件props

vue 订阅