props写法_深入理解vue中Props属性

使用 Props 传递数据

组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

“prop” 是组件数据的一个字段，期望从父组件传下来。子组件需要显式地用 props 选项 声明 props：

然后向它传入一个普通字符串：

举例

错误写法：

正确写法：

props 传入多个数据(顺序问题)

第一种：

HTML

JS

结果：hello! hello1! hello2!

第二种：

HTML

JS

结果：123hello! 123hello1! 123hello2!

第三种：

HTML

JS

结果：hello! 123 hello1! 123 hello2!123

第四种：

HTML

JS

结果：hello! 123 123hello1! 123hello2!

结论：

在props 中传入多个数据是，如果在父组件的模板类添加其他元素或者字符会有：

1-在最前面加入—每个子组件渲染出来都会在其前面加上

2-在最后面加入—每个子组件渲染出来都会在其后面加上

3-在中间加入—他前面子组件后面加上，后面的子组件后面加上