精华内容
下载资源
问答
  • vue props 传值

    2020-05-18 10:04:17
    选项声明它期待获得的数据props:[data]然后在组件内使用data二、父组件需要做的这个时候需要区分静态传值和静态传值静态在父组件使用子组件标签时   <tem data="haha"></tem>这个时候静态传值...

    一、子组件需要做的

    子组件要显式地用 props 选项声明它期待获得的数据

    props:[data]

    然后在组件内使用data

    二、父组件需要做的

    这个时候需要区分静态传值和静态传值

    静态

    在父组件使用子组件标签时   

    <tem data="haha"></tem>

    这个时候静态传值就完成了

    动态

    在父组件使用子组件标签时

    <tem v-bind: data="myData"></tem>

    data(){ return{ myData:"haha"  }}

    注:在传递数字的时候尽量使用静态传值

    三、props验证

    有时候我们需要对传递过来的值进行验证,以确定传递的值符合我们的要求

    要指定验证规格,需要用对象的形式,而不能用字符串数组  这时的props需要写成对象

    props:{data:Array}

    注: 当 prop 验证失败,Vue 会在抛出警告 (如果使用的是开发版本)。props会在组件实例创建之前进行校验,所以在 default 或 validator 函数里,诸如 data、computed 或 methods 等实例属性还无法使用;

    四、单向数据流

    props传值是单向的:父组件的数据可以传给子组件,而子组件的数据不能传给父组件,这是为了防止子组件无意修改了父组件的状态,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着不应该在子组件内部改变 prop。如果这么做了,Vue 会在控制台给出警告

    五、修改props数据

    通常改变props的数据有两个原因

     1、prop 作为初始值传入后,子组件想把它当作局部数据来用

     2、prop 作为初始值传入,由子组件处理成其它数据输出

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

    因此  接下来:

    1、定义一个局部变量,并用 prop 的值初始化它

    props: ['initialCounter'],    data: function () {      return { counter: this.initialCounter }    }

    但是,定义的局部变量counter只能接受initialCounter的初始值,当父组件要传递的值发生变化时,counter无法接收到最新值

    2、定义一个计算属性,处理 prop 的值并返回

    props: ['size'],    computed: {    normalizedSize: function () {    return this.size.trim().toLowerCase()    }    }

    但是,由于是计算属性,则只能显示值,而不能设置值

    3、更好的方式,使用变量储存prop的初始值,并使用watch来观察prop的值的变化。发生变化时,更新变量的值

    props:['childMsg'],    data(){      return{       temp:this.childMsg       }     },     watch:{     childMsg(){    this.temp =this.childMsg     }     }

    展开全文
  • vue props传值

    2020-12-10 16:34:08
    父组件通过props 把值传递给子组件 在子组件内部不能直接修改父组件传递过来的值------------- 子组件可以通过 this.$emit(“方法”); 让父组件来修改值 子组件内 父组件内 methods中

    父组件通过props 把值传递给子组件 在子组件内部不能直接修改父组件传递过来的值------------- 子组件可以通过 this.$emit(“方法”); 让父组件来修改值
    子组件内
    在这里插入图片描述
    父组件内
    在这里插入图片描述
    methods中
    在这里插入图片描述

    展开全文
  • 今天小编就为大家分享一篇vue props传值失败 输出undefined的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 错误是说的避免直接修改父组件传入的值,因为会改变父组件的值解决方案:可以在data中重新定义一个变量,改变指向,但是也只是针对简单数据类型,因为复杂数据类型栈存贮的是指针,props:['listShop'],data(){return{...

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

    解决方案:

    可以在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:['listShop'],data(){return{...

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

    解决方案:

    可以在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))

    文章来源: www.oschina.net,作者:东东笔记,版权归原作者所有,如需转载,请联系作者。

    原文链接:https://my.oschina.net/u/560237/blog/3167739

    展开全文
  • props 传值在子组件定义props 关于mounted created获取问题 export default{ props:["name"], data(){ return{ data:this.name } }, created(){ console.log(data); // 小明 console.log(this.name) // 小明 }, ...
  • } {{mmmmmm}} {{item.main}} export default { name: 'hehe', props: { text:{ //此处为要接收的值 text为接收过来key type:Array, //key不能乱写 default:'' }, mmmmmm:{ //同上 type:String, default:'我是默认值...
  • vue props传值失败 输出undefined的问题

    千次阅读 2018-11-26 10:56:31
    vue 使用传值时候最好全部用小写: 转载来自:https://blog.csdn.net/qq_32921921/article/details/80610523
  • 1、父子组件传值方式props/$emit$parent / $children$ref 2、非父子组件传值方式事件总线//原理上就是建立一个公共的js文件,专门用来传递消息 //bus.js import Vue from 'vue' exports default new Vue //需要传递...
  • vue props传值方法

    2018-03-12 18:33:00
    props: { text:{ //此处为要接收的值 text为接收过来key type:Array, //key不能乱写 default:'' }, mmmmmm:{ //同上 type:String, default:'我是默认值' } }, data () { return { ...
  • vue props传值后watch事件未触发的问题

    千次阅读 2019-09-30 10:19:53
     早期我写过一篇vue组件传值的文章,传值方式是这样的:    官网的简单实例也是这样的:    用中括号包含参数即可,至于参数是什么类型,你传值的时候给就行了,用的时候直接用。因为JS是弱类型语言,这块...
  • vue props 传值 触发事件方法

    千次阅读 2018-10-25 11:43:02
    先父页传值 到子页用watch 监听show的值改变,触发方法 &lt;dialog :show='showData' v-on:listen='handData'&gt;&lt;/dialog&gt; data(){ return:{ showData:true } } methods:{ ...
  • 如果在prop中传的值为一个没有使用特殊命名规则的变量如:(type),可以顺利传值:而当这个变量为驼峰命名法如:(selectName),就会传不过去:解决方法是把selectName标签改为select-Name:我是按钮{{selectName}}, ...
  • vue props传值,子组件接受到undefined

    千次阅读 2019-03-28 18:05:37
    不应该在一个子组件内部改变 prop,Vue 会在浏览器的控制台中发出警告。 props传参,子组件接受到undefined的可能情况之一是因为大小写问题,因为 HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符...
  • 我们学习了这个传值可以通过props 父组件传给子组件, 也可以通过自定事件的形式传会给父组件this.$emit('自定义事件','要传递的参数') ,但现在呢?我们要学习的是,通过第三方来实现的,简单打个比方说,如果说props 和$...
  • 父组件与子组件传值 //父组件通过标签上面定义传值 //子组件通过props方法接受数据 {{obj}} 2.子组件向父组件传递数据 //子组件通过$emit方法传递参数 // {{data}} active-class 是哪个组件的属性? vue-router 模块...
  • 子组件(goods.vue):直接使用props接收的值显示在页面上 <text>{{`另需配送费${busiIntroData.physical}元`}}</text> props:{ busiIntroData:Object } 显示: 解决: 对于props声明为驼峰写法,...
  • 1.你可能是这样写的: 2.报这样的错 解决方法:

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,742
精华内容 1,096
关键字:

vueprops传值

vue 订阅