精华内容
下载资源
问答
  • 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.js中使用props传值的方法发布于 2020-8-17|复制链接摘记: 1.静态传值(组件中赋值好props中属性的传递给子组件)父组件```javascript```子组件```javascript{{message}}..1.静态传值(组件中赋值好props...

    Vue.js中使用props传值的方法

    发布于 2020-8-17|

    复制链接

    摘记: 1.静态传值(在父组件中赋值好props中属性的值传递给子组件)父组件

    ```javascript

    ```

    子组件

    ```javascript

    {{message}}

    ..

    1.静态传值(在父组件中赋值好props中属性的值传递给子组件)父组件

    ```javascript

    import child from './components/child.vue'

    export default{

    components:{

    child

    }

    }

    ```

    子组件

    ```javascript

    {{message}}

    export default{

    props:['message'],

    data(){

    },

    methods:{

    fun:function(){

    }

    }

    }

    ```

    结果:打印hello

    2.动态传递(根据父组件中值的改变,props动态的改变子组件中的值)父组件

    ```javascript

    import child from "./components/child.vue"

    export default{

    //构建child组件

    components:{

    child

    },

    data(){

    return {

    //初始化message

    message:''

    }

    }

    }

    ```

    2.子组件

    ```javascript

    childmessage is:{{childmessage}}

    export default{

    //将childmessage传递给child

    props:['childmessage']

    }

    ```

    展开全文
  • 特别是当子组件使用了某些第三方 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() 方法。

    展开全文
  • 本文实例为大家分享了Vue.js使用props传递数据的具体代码,供大家参考,具体内容如下 基本用法 通常父组件的模板包含子组件,父组件要正向地向子组件传递数据或参数,子组件接收到后根据参数的不同来渲染不同的...
  • 说一下为什么会有这个需求:如果不需要处理props直接用,是不用这么麻烦的, ...因为此时父组件还没有传过来,但是如果你是写methods中的方法中获取的话,此时已经传过来了,可以直接使用this.name获取

    说一下为什么会有这个需求:如果不需要处理props的值直接用,是不用这么麻烦的,
    直接在页面上用{{name}}就好了。在做项目的时候由于要对props的值做处理后才能使用,当我在methods、mounted 用this.xxx,发现取出来的值是空对象,有点疑惑
    于是就上网查了原来:
    通过这个方法传过来的值,在子组件mounted函数中如果直接去获取的话有可能会获取不到。因为此时父组件的值还没有传过来,但是如果你是写在methods中的方法中获取值的话,此时值已经传过来了,可以直接使用this.name获取到。 如果你想要在子组件的mounted()中获取传值的话最好做个延迟或者是监听,但是又有一点,为啥我在页面中使用{{name}}没有问题呢! 这就是vue的好处它是等到这个name值有变化的时候就会更新的。所以才会看到显示。(其实先是空然后值传过来了,就会加载上去。)

    https://segmentfault.com/q/1010000014590428 (原文链接)

    解决方法,直接上代码了:

    父组件代码:

    <template>
    	// 将photoList 传给子组件
      <div class="home"><photo-view :photoList="photoList"></photo-view></div>
    </template>
    <script>
    import PhotoView from './components/PhotoView'
    import axios from 'axios'
    
    export default {
      name: 'Home',
      components: {
        PhotoView
      },
      data () {
        return {
          photoList: []
        }
      },
      mounted () {
        this.getPhotoInfo()
        this.getPushText()
      },
      methods: {  
        getPhotoInfo () {
        // 获取后台数据通过getPhotoInfoSucc得到photoList 
          axios.get('./mock/photo.json')
            .then(this.getPhotoInfoSucc)
        },
        getPhotoInfoSucc (res) {
          res = res.data
          if (res.data) {
            const data = res.data
            this.photoList = data
            console.log(data)
          }
        }
      }
    }
    </script>
    

    子组件代码:

    <template>
    </template>
    <script>
    export default {
      name: 'PhotoView',
      props: {
        photoList: Array
      },
      data () {
        return {
          newPhotoList: [],
        }
      },
      //监听photoList的值,当它由空转变时就会触发,这时候就能取到了,拿到值后要传值到data的newPhotoList中
      watch: {
        photoList: function (newData) {
          this.newPhotoList = newData
          this.getPhotoList(this.newPhotoList)
        }
      },
      methods: {
        getPhotoList (res) {  
        console.log(this.newPhotoList)
      }
    }
    </script>
    

    这里是参考https://www.jianshu.com/p/cdc90de5b1cf

    个人学习笔记,如有误,请指教,谢谢

    展开全文
  • child.vue中,msg实在data定义的变量,使用props:['msg']从父组件中获取msg的组件部分:调用组件的时候,使用v-bind将msg的绑定为parent.vue中定义的变量message,这样就能将parent.vue中的message的...
  • 子组件定义props,父组件传入数据,子组件在js获取的时候使用,如果是在html里面,可以直接把变量渲染上去。子组件获取不到时需要深拷贝我就直接从代码上面来进行js代码://子组件,定义传入的变量的类型等...
  • 在使用 vue开发的过程,我们经常会使用 props进行组件的传值,下面是我的分享,希望对你有所帮助!4.组件添加如下代码:我是echarts模板封装import Eche from '@/components/vueechartsmo.vue'export default {name...
  • 1.静态传值(组件中赋值好props中属性的传递给子组件)父组件import child from './components/child.vue'export default{components:{child}}子组件{{message}}export default{props:['message'],data(){},...
  • 1.静态传值(组件中赋值好props中属性的传递给子组件) 父组件 <input v-model=message> <child message=hello></child> [removed] import child from './components/child.vue' export ...
  • 组件给子组件传参,最常见的方式:父组件中使用 v-bind 绑定传送,子组件使用 props 接收即可 <DistrictIdSelector :fieldType="2" /> props: { fieldType: { type: Number, default() { return 1; }...
  • vue2.x模块化编程中子组件必须修改props值 在vue官方文档明确规定props的数据是单向的,我们不应该试图组件中修改props! 也给出了两个解决方案 我们使用第一种方法 因为暂时数据不用变(其实两者差不多) ...
  • 父传子传递:当子组件在父组件当做标签使用的时候,通过给子组件绑定一个自定义属性,为需要传递的数据接收:在子组件内部通过props进行接收接收的方式有2种 一种是数组接收 另一种是对象接收一般情况下我们都...
  • 组件:(其中fMsg是要从父组件传递过来的数据,注意fMsg要组件props里先定义)父组件:(使用v-bind,将自身数据绑定给中转属性fMsg,从而通过 子组件props中的fMsg,将父组件中msg的传递给了子组件。...
  • props属性的特点:(单向数据流) 业务会经常遇到两种需要改变props的情况,一种是父组件传递初始进来,子组件将它作为初始保存起来,自己的作用域下可以随意使用和修改。这种情况可以在组件data再声明一...
  • vue中组件向子组件传递方法

    千次阅读 2020-03-11 21:32:58
    在vue中组件是默认无法访问到父组件data的数据和methods方法的,所以我们需要使用特定的方法来完成它。 一、父组件向子组件传值 通过 props声明传递过来的即可: 流程: 1、通过属性绑定把父组件中...
  • 组件向子组件传递数据时,把props中的默认值传给子组件,如下代码,自定义组件不写属性就是显示的titledefault“长城”。 <!DOCTYPE html> <html lang="en"> <head> <meta charset=...
  • 5、如果子组件要修改来自父组件,不能直接修改,要通过事件进行修改首先子组件中点击事件绑定方法方法调用$emit()事件,通过这个方法发送请求给父组件,同时这个方法有两个参数,第一个是方法名(此方法父...
  • 方法 1.父组件data中定义向子组件传递的(属性) 2.子组件props中定义属性来接收 ...5.孙子组件中使用props定义属性来接收父组件传递过来的‘ 6.孙子组件就可以使用爷爷组件传递过来的辣 ...
  • 首先说下情况,父组件的修改和添加使用的是同一套element ui的Dialog组件,当父组件点击修改方法时,会把选中行的数据通过props中传递给子组件。 下面是子组件接收数据 这不是想要的效果,实际应该是提交修改后...
  • 组件在引用之后相当于在父组件内开辟了一块单独的空间, 来根据父组件props过来的进行相应的操作,单本质上两者还是泾渭分明,相对独立。 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法、 ...
  • 概述 最近在用muse ui的时候碰到一个问题,简单来说是这样的,父子之间传值,父组件和子组件使用相同的props命名,并且子组件不用emit,而用等号赋值。...1.父组件在调用子组件的时候使用sync。 <text...
  • 组件可以引用子组件的时候,通过属性绑定(v-bind:)的形式,把需要的传递的传递给子组件内部,供子组件使用 注意:v-bind:绑定名(随便取,但是要跟子组件里的props里的声明保持一致,) props中的数据是...
  • 子传父:组件中监听一个事件,组件中利用$emit触发这个事件并带上数据作为第二个参数,这时父组件中监听事件的回调函数就会被调用,回调函数的参数就是子组件带上来的数据,这样就可以组件中使用组件...
  • 组件中使用组件,然后组件标签上通过“ :属性 = ‘属性’ ”来写一个自定义属性,就可以将父组件的属性传递给子组件,然后组件中通过“ props:[’属性‘] ”来接收,然后组件标签内就可以直接...
  • 前言在vue项目中组件之间的通讯是很常见的问题,同时也是很重要的问题,我们大致可以将其分为三种情况:父传子:组件中绑定组件中用props接收子传父:组件中监听一个事件,组件中利用$emit触发...
  • Vue组件之间的调用方法/传值1.子组件调用父组件的方法(或父组件给子组件传值)2.父组件调用子组件的方法(或子组件给父组件传值)3.非父子组件之间调用的方法或传值 1.子组件调用父组件的方法(或父组件给子组件...

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 157
精华内容 62
关键字:

vue组件在方法中使用props值

vue 订阅