精华内容
下载资源
问答
  • 安装less-loader最新版vue项目项目提示报错: Failed to compile with 1 errors报错信息Failed to compile with 1 errorsModule build failed: TypeError: loaderContext.getResolve is not a function ERROR Failed ...

    823f7b42fb44e7765173142c8fc70e68.png

    安装less-loader最新版vue项目项目提示报错: Failed to compile with 1 errors

    报错信息
    Failed to compile with 1 errors
    Module build failed: TypeError: loaderContext.getResolve is not a function

    943b6bd6d257df67771db7e0b4c9b5d4.png
     ERROR  Failed to compile with 1 errors                                 14:20:44
    
     error  in ./src/components/HelloWorld.vue
    
    Module build failed: TypeError: loaderContext.getResolve is not a function
        at createWebpackLessPlugin (D:workvue3.0gcmmobilenode_modulesless-loaderdistutils.js:31:33)
        at getLessOptions (D:workvue3.0gcmmobilenode_modulesless-loaderdistutils.js:148:31)
        at Object.lessLoader (D:workvue3.0gcmmobilenode_modulesless-loaderdistindex.js:27:49)
    
     @ ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-469af010","scoped":true,"hasInlineConfig":false}!./node_modules/less-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/HelloWorld.vue 4:14-378 14:3-18:5 15:22-386
     @ ./src/components/HelloWorld.vue
     @ ./src/router/index.js
     @ ./src/main.js
     @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
    处理方案就是降低less-loader版本,我的vue版本是2.5.2,
    先卸载最新的版本
    yarn remove less-loader
    
    npm uninstall less-loader
    安装less-loader 5.0.0版本
    yarn add less-loader@5.0.0
    
    npm install less-loader@5.0.0 -D

    以上就是处理vue:'^2.5.2'版本处理less-loader导致Failed to compile with 1 errors的处理方法

    展开全文
  • 点题:(需要从组件内部修改props的需求)解决方案...Vue学习笔记-3 前言Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props的双向绑定功能。以往在Vue1.x利用p...

    3ee23bc21ed8cce27ecf190aa61d7b3e.png

    点题:(需要从组件内部修改props的需求)

    解决方案:

    在子组件,监听俩处:1. 内部属性副本,改变了,触发自定义事件同步到父组件

    2. 监听父组件传入的props(原属性),外部修改了原属性,同步给子组件。

    Vue学习笔记-3 前言

    Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props双向绑定功能。
    以往在Vue1.x中利用propstwoWay.sync绑定修饰符就可以实现props的双向绑定功能,但是在Vue2中彻底废弃了此功能,如果需要双向绑定需要自己来实现。

    Vue2的组件props通信方式

    在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribute传递props给组件内,组件内只能被动接收组件外传递过来的数据,并且在组件内,不能修改由外层传来的props数据。

    6d473049550e48aa19f55e34906e985d.png

    关于这一点的修改官方给的解释:

    prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。

    虽然废弃了props的双向绑定对于整个项目整体而言是有利且正确的,但是在某些时候我们确实需要从组件内部修改props的需求

    案例

    假设我要做一个iOS风格的开关按钮,需求就只有两个:

    1. 点击按钮实现 开/关 状态切换
    2. 不点击按钮,也可以通过外部修改数据切换开关状态,比如级联联动开关。

    0a201300b952ce5f3fa2fa5527dcf991.png

    代码大致是类似这样的:

    //开关组件代码
    Vue.component("switchbtn",{
        template:"
    {{result?'开':'关'}}
    ",
        props:["result"],
        methods:{
            change(){
                this.result=!this.result;
            }
        }
    });
    
    //调用组件
    new Vue({
        el: "#app",
        data:{
            result:true//开关状态数据
        },
        methods:{
            change(){
                this.result=!this.result;
            }
        }
    });
    

    但是在vue2.0中上面的代码在点击开关时会报错:

    [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 )

    组件内不能修改props的值,同时修改的值也不会同步到组件外层,即调用组件方不知道组件内部当前的状态是什么

    在Vue2.0中,实现组件属性的双向绑定方式

    1. 在组件内的data对象中创建一个props属性的副本

    因为result不可写,所以需要在data中创建一个副本myResult变量,初始值为props属性result的值,同时在组件内所有需要调用props的地方调用这个data对象myResult

    Vue.component("switchbtn", {
        template: "
    {{myResult?'开':'关'}}
    ",
        props: ["result"],
        data: function () {
            return {
                myResult: this.result//data中新增字段
            };
        },
        ......
    });
    

    2. 创建针对props属性的watch来同步组件外对props的修改

    此时在组件外(父组件)修改了组件的props,会同步到组件内对应的props上,但是不会同步到你刚刚在data对象中创建的那个副本上,所以需要再创建一个针对props属性result的watch(监听),当props修改后对应data中的副本myResult也要同步数据。

    Vue.component("switchbtn", {
        template: "
    {{myResult?'开':'关'}}
    ",
        props: ["result"],
        data: function () {
            return {
                myResult: this.result
            };
        },
        watch: {
            result(val) {
                this.myResult = val;//新增result的watch,监听变更并同步到myResult上
            }
        },
        ......
    

    3. 创建针对props副本的watch,通知到组件外

    此时在组件内修改了props的副本myResult,组件外不知道组件内的props状态,所以需要再创建一个针对props副本myResult,即对应data属性的watch。
    在组件内向外层(父组件)发送通知,通知组件内属性变更,然后由外层(父组件)自己来变更他的数据

    Vue.component("switchbtn", {
        template: "
    {{myResult?'开':'关'}}
    ",
        props: ["result"],
        data: function () {
            return {
                myResult: this.result//①创建props属性result的副本--myResult
            };
        },
        watch: {
            result(val) {
                this.myResult = val;//②监听外部对props属性result的变更,并同步到组件内的data属性myResult中
            },
            myResult(val){
                //xxcanghai 小小沧海 博客园
                this.$emit("on-result-change",val);//③组件内对myResult变更后向外部发送事件通知
            }
        },
        methods: {
            change() {
                this.myResult = !this.myResult;
            }
        }
    });
    
    new Vue({
        el: "#app",
        data: {
            result: true
        },
        methods: {
            change() {
                this.result = !this.result;
            },
            onResultChange(val){
                this.result=val;//④外层调用组件方注册变更方法,将组件内的数据变更,同步到组件外的数据状态中
            }
        }
    });
    

    至此,实现了组件内数据与组件外的数据的双向绑定,组件内外数据的同步。最后归结为一句话就是:组件内部自己变了告诉外部,外部决定要不要变。

    9b42aba3c482d94886820650b91046ea.png

    4. 什么样的props适合做双向绑定?

    首先要声明的是双向绑定的props肯定是不利于组件间的数据状态管理,尤其是在复杂的业务中更是如此,所以要尽可能的少用双向绑定,过于复杂的数据处理建议使用Vuex (vuex.vuejs.org/zh-cn/intro…)

    但是在我们平时使用过程中又确实有props双向绑定的需求,个人认为只有在满足以下条件时再使用双向绑定的props。

    1. 组件内部需要修改props。
    2. 组件需要可以由外部在运行时动态控制,而非单纯初始化。
    3. 组件外部需要读取组件内的状态来进行处理

    满足上述条件的有比如本例中的switch开关组件,需要外部控制开关状态;再比如Tab多标签页组件的activeIndex属性,需要可以由外部控制标签页当前打开哪一页等等

    自动化的props双向绑定处理

    Vue的mixin组件——propsync

    通过上例也可以看出在Vue2.0中实现props的双向绑定很麻烦,如果有两个props需要做双向绑定上面的代码就要实现两遍,代码极其冗余。
    所以我写了一个mixin来自动化处理props的双向绑定的需求——propsync

    主要功能

    1. 实现了在组件内自动创建所有prop对应的data属性,方便组件内修改prop使用。解决了vue2.0中不允许组件内直接修改prop的设计。
    2. 实现了组件外修改组件prop,组件内自动同步修改到data属性。
    3. 实现了组件内修改了data属性(由prop创建的),自动向组件外发出事件通知有内部prop修改。由组件外决定是否要将修改同步到组件外

    propsync的使用方法

    编写组件

    1. 对于编写组件时,如果需要props双向绑定,则直接引入mixin,并在配置中声明mixin即可: mixins: [propsync]
    2. 此mixin会根据prop的名称生成对应的data属性名,默认为在prop属性名前面增加"p_",即若prop中有字段名为active,则自动生成名为p_active的data字段(props到data的名称变更方法可自行修改,详见propsync源码开头配置)
    3. propsync默认会将所有props创建双向绑定,可通过propsync:false来声明此props不需要创建双向绑定。

    例:

    import propsync from './mixins/propsync';//引入mixin文件
    export default {
      name: "tab",
      mixins: [propsync],//声明使用propsync的mixin
      props: {
        active: {
          type: [String, Number],//会被propsync自动实现双向绑定,在data中创建p_active变量
        },
        width: {
          type: [Number, String],
          propsync:false//不会被propsync实现双向绑定
        }
      },
      methods: {
        setActive(page, index, e) {
          this.p_active = index;//可以直接使用this.p_active
        }
      }
    }
    

    调用组件

    1. 引入propsync后,会在内部双向绑定的data变更后触发一个onPropsChange事件。遂在调用组件处,增加一个事件监听 onPropsChange(可修改),当组件内修改了props时propsync会触发此事件,返回参与依次为:修改prop名称,修改后值,修改前值。可以由当前组件调用方(父组件)来决定是否要将组件内的变更同步到调用方

    例:

      
    ......
    {
      data:{
       active:0
      },
      methods:{
       change:function(propName,newVal,oldVal){
         this[propName]=newVal;
         console.log("组件tab的" +propName+ "属性变更为" +newVal);
       } 
      }
    }
    

    源码下载

    Vue的mixin组件propsync已经托管至Github:
    github.com/xxcanghai/c…

    相关笔记

    Vue学习笔记-1(www.cnblogs.com/xxcanghai/p…)

    Vue学习笔记-2(www.cnblogs.com/xxcanghai/p…)

    Vue学习笔记-3 如何在Vue2中实现组件props双向绑定 (www.cnblogs.com/xxcanghai/p…)

    摘自:https://juejin.im/entry/5843abb1a22b9d007a97854c

    展开全文
  • 关键词:组件的参数校验非props特性props特性注意:父组件传递一个数字的数据,属性传递所使用的形式 :xxx = "数字" (一)组件的参数校验组件的参数校验,父组件向子组件传递的内容,子组件对所接收的数据做一些...

    0e498b36d4ca37480490c42fc15f3eeb.png

    关键词:

    • 组件的参数校验
    • 非props特性
    • props特性

    注意:

    • 父组件传递一个数字的数据,属性传递所使用的形式 :xxx = "数字"

    (一)组件的参数校验

    组件的参数校验,父组件向子组件传递的内容,子组件对所接收的数据做一些约束(规则的改变),这些约束叫做参数的校验。

    一、父组件需要向子组件传递参数,通过属性的形式;子组件势必要接收这些数据,用props,然后在子组件的template中传递该数据,以下已经演示很多遍:

    <body>
          <div id="root">
               <child content="hello world"></child>
          </div>
    
          <script>
            Vue.component('child', {
                 props: ['content'],
                 template: '<div>{{content}}</div>'
            })
    
    	var vm = new Vue({
                el: "#root"
    	  	})
          </script>
    </body>

    二、子组件如何进行组件的约束

    1、出现需求:父组件调用子组件时,所传递的数据需要做一些约束,要求子组件传递给父组件的数据必须为字符串

    2、解决方法:改变一下子组件中的props传参的规则,即将原本值的数组形式改为对象形式。对象的键为所接收的数据名,键值为数据类型(如String、Number、Object)

    子组件接收到的数据属性,必须为 XXX(数据类型)

    <body>
       <div id="root">
            <child content="hello world"></child>
       </div>
    
       <script>
            Vue.component('child', {
               props: {     //将props接收父组件的数据用对象表示
                  content: String
               },
               template: '<div>{{content}}</div>'
            })
    
    	var vm = new Vue({
                el: "#root"
    	})
       </script>
    </body>

    这样一来,父组件调用子组件时能调用到为字符串的值。同样,父组件的属性传递也可以使用数字,数字注意使用 :xxx = "数字" 形式,props相应改变键值。就不一一赘述。

    3、其他类型的参数校验

    (1)多种数据类型的参数校验

    假设同时在子组件要同时接收父组件传过来的多种数据类型,则可以在props中表示以下:

     Vue.component('child', {
           props: {       //将props接收父组件的数据用对象表示
               content: [ Number, String ]
           },
           template: '<div>{{content}}</div>'
     })

    (2)复杂的参数校验

    当子组件props接收一个名为content的属性,会设置以下一些配置参数:其中type(表示所传数据的类型)、required:true(表示该属性是必传)、default: 'default' (提醒父组件并没有该属性传递)、validator (自定义校验器,表示对传入属性的进行校验)

    <body>
        <div id="root">
            <child content="hello world"></child>
        </div>
    
        <script>
            Vue.component('child', {
                 props: {       //将props接收父组件的数据用对象表示
                      content: {
                          type: String,    //表示类型必须为 String
                          required: false,  //true 表示属性必传  false表示可以不传属性
                          default: 'default'  //提醒父组件并没有属性传递
                          validator: function(value){
                          	 return (value.length >5 ) //自定义校验器,表示对传入属性的进行校验长度
                          }
                       }
                },
                template: '<div>{{content}}</div>'
            })
    
    	var vm = new Vue({
                el: "#root"
    	 })
        </script>
    </body>

    (二)非props特性

    1、非props特性,父组件通过属性向子组件传值时,在子组件接收时,并没有声明props属性用来接收数据。

    <body>
          <div id="root">
               <child content="hello world"></child>
          </div>
    
       <script>
            Vue.component('child', {
                 template: '<div>hello</div>'
            })
    
    	var vm = new Vue({
                  el: "#root"
    	})
        </script>
    </body>

    试一下吧,会报错:显示父组件的属性content未被定义

    [重点]特点如下:

    • 若子组件未定义props进行接收父组件属性传来的值,那么这个属性(如content)则为非props特性
    • 父组件如果使用一个非props特性,子组件没有通过peopes接收属性数据,但该属性则会展现在子组件template中的页面模板的dom标签的属性中。

    2、props特性,父组件通过属性(如content)向子组件传值时,而子组件在props中声明了这个属性(如content)的数据。当父子组件关于数据传值的时候,出现了对应的属性(如content),那么这个属性则为 props特性

     <div id="root">
          <child content="hello world"></child>
     </div>
     <script>
        Vue.component('child', {
           props: {       //将props接收父组件的数据用对象表示
              content: {
                type: String,    //表示类型必须为 String 
              }
           },
           template: '<div>{{content}}</div>'
        })
        var vm = new Vue({
           el: "#root"
         })
     </script>

    [重点]特点如下:

    • 子组件所带的属性传递是不会出现在dom上
    • 父组件通过属性传值后,子组件就会通过 template中的插值表达式 或通过 this.content去取得该属性中的内容
    展开全文
  • 传入的值想作为局部变量来使用,直接使用报错。错误是说的避免直接修改父组件传入的值,因为会改变父组件的值解决方案:可以在data重新定义一个变量,改变指向,但是也只是针对简单数据类型,因为复杂数据类型栈存贮...

    传入的值想作为局部变量来使用,直接使用会 报错。错误是说的避免直接修改父组件传入的值,因为会改变父组件的值

    解决方案:

    可以在data中重新定义一个变量,改变指向,但是也只是针对简单数据类型,因为复杂数据类型栈存贮的是指针,

    props:['listShop'],

    data(){

    return{

    listShopChild:this.listShop

    }

    },

    created(){

    this.listShopChild=30

    }

    对复杂数据类型,

    1. 可以手动深度克隆一个复杂的数据出来,循环或者递归都行

    //数组

    var x = [1,2,3];

    var y = [];

    for (var i = 0; i < x.length; i++) {

    y[i]=x[i];

    }

    console.log(y); //[1,2,3]

    y.push(4);

    console.log(y); //[1,2,3,4]

    console.log(x); //[1,2,3]

    //对象

    var x = {a:1,b:2};

    var y = {};

    for(var i in x){

    y[i] = x[i];

    }

    console.log(y); //Object {a: 1, b: 2}

    y.c = 3;

    console.log(y); //Object {a: 1, b: 2, c: 3}

    console.log(x); //Object {a: 1, b: 2}

    2. Object.assign   (看情况使用)

    只会对只是一级属性复制,比浅拷贝多深拷贝了一层而已,所以还是无法达到深度克隆的目的.

    3. 强大的JSON.stringify和JSON.parse

    const obj1 = JSON.parse(JSON.stringify(obj))

    展开全文
  • 传入的值想作为局部变量来使用,直接使用报错。错误是说的避免直接修改父组件传入的值,因为会改变父组件的值解决方案:可以在data重新定义一个变量,改变指向,但是也只是针对简单数据类型,因为复杂数据类型栈存贮...
  • 报错如图所示: 其原因是我从父组件向子组件传值时,用props接收之后,我在子组件...由于Vue内部的机制,传入的props中的值 是不允许被修改的。在新的渲染机制,当父组件重新渲染时,子组件都被会覆盖,这时的p
  • 使用vue组件化开发的过程,遇到的问题 组件props传入数据: 组件内部结构: props成功传入: 但是事件处理却失败: 根据报错信息: [Vue warn]: Error in v-on handler: “TypeError: Cannot read property ...
  • Vue的项目,如果项目简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大型项目,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要多个组件循环使用。这...
  • Vue的项目,如果项目简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大型项目,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要多个组件循环使用。这...
  • vue父子组件通信

    2019-04-08 17:33:59
    vue中,父组件可以传递props给子组件,但不支持子组件内部改变props(会报错)。所以通常我们使用this.$emit来实现子组件改变父组件的值。 如果props传入的参数在子组件中必须变化。可以把props赋给data中的变量a...
  • 问题:想在过滤器filters中使用this,可能需要data或者props的一个值作为过滤的条件,如果直接使用this是会报错的,因为this为undefined,那如何解决呢?下面列举几个解决办法 一、使用computed <template> ...
  • 报错:Invalid shorthand property initializer

    千次阅读 2019-06-04 15:05:17
    vue 组件中使用子组件接受父组件的数据时报错 Invalid shorthand property initializer data:function(){ return { //props 的值可以通过this.xxx直接来获取,这里是 : 不是 = count = this.msg } } 后...
  • Vue设计中props为单向数据流,即props数据在父组件进行修改,并流向子组件。而在子组件里只能对props数据进行读取,不能进行修改,否则会触发报错。 为了达到在子组件里修改props值的要求,需要通过以下2步来实现 ...
  • 前置说明:借鉴来源 1.单向数据流:只能父组件向子组件传递信息,子组件不能向父...在props中可以用驼峰或短横线,在template和data、this.xxx中只能使用驼峰,这是因为在vue中短横线会被误认为减号,会报错。即...
  • // 同样也可以在 vm 实例像 “this.message” 这样使用 template: '<span @click="toParent">{{ message }}</span>', methods: { toParent: function () { this.$emit('fromChild', '子向父传值,改变父...
  • 父组件: 1:导入子组件的路径,增加模态框, ...在子组件props接收:用法就直接是用this.currentId就可以使用了。无需再data里面再去定义,会报错。 整体各别名词的专业术语描述的有点问题,但是大致能懂哈。 ...
  • 但是现在问题是父组件的数据是异步获取的,而子组件一开始就会渲染,如果此时没有传入数据,而子组件又要用到数据的length属性时就会报错: 怎么办呢?最简单的办法就是让子组件条件渲染,当有数据的时候才渲染,...
  • 配置项-同el-tree中props Object { label: "label", children: "children", isLeaf: "leaf", disable: "disable" } 用法和el-tree的props一样 8 node_key 自定义node-key的值,默认为id String id 必须与treedata...
  • Vue自定义组件Props中接收数组 字符串string创建,方法 Object.assign()更新对象 js图片压缩推荐 webpack 报错(Cannot find moudle 'webpack-cli/bin/config-yargs') vue两data参数等于res.detail,更新一参数另一参数...
  • 但实际使用发现这样定义不起作用。 <a href="https://github.com/yiminghe/async-validator#deep-rules">async-validator的deep rule配置也不起作用。 看u-form-item源码才发现压根就没处理复杂对象的情况,...
  • 注意这里,vue 项目,主应用设置publicPath: './'会造成子应用配置的 publicPath 失效进而刷新页面报错的问题。 一说可以在子应用 vue.config.js 里直接配置 publicPath 解决。 构建子应用 在主应用的同级目录下...
  • 主应用需要用到elementui,暂时使用vue2.0+qiankun2.0版本。vue3.0beta体验在下面【子应用构建】章节 主应用项目主要在5个文件:utils文件夹,app.vue,appRegister.js,main.js,render.js 前提条件 cnpm i ...

空空如也

空空如也

1 2
收藏数 22
精华内容 8
关键字:

vue中props使用this报错

vue 订阅