vue打印props的值_vue props 传值

一、子组件需要做的

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

props:[data]

然后在组件内使用data

二、父组件需要做的

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

静态

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

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

动态

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

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 作为初始值传