vue props 传值

一、子组件需要做的

子组件要显式地用 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     }     }

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值