Vue props用法

也就是props是子组件访问父组件数据的唯一接口。父组件的数据需要通过prop才能下发到子组件中。不能在子组件的模板内直接引用父组件的数据。

基本用法

1. <div id="app1">
3. <child :hello=&#39;hello&#39;>child>
4. div>
5. <script>
6. var com1 = Vue.component(&#39;child&#39;,{
7. // 声明在prop中的变量可以引用父元素的数据
8. props:[&#39;hello&#39;],
9. // 这里渲染props中声明的那个hello
10. template:&#39;<div><p>{{ hello }}p>div>&#39;,
11. })
13. var app1 = new Vue ({
14. el: &#39;#app1&#39;,
15. data: {
16. greet: {
17. hello:&#39;hello,&#39;,
18. world: &#39;world&#39;,
19. },
20. message: &#39;message1&#39;,
21. }
22. })
23. script>

其它答案

牛仔很忙2020-06-22 18:56:36

Vue props用法详解

组件接受的选项之一 props 是 Vue 中非常重要的一个选项。父子组件的关系可以总结为：

props down, events up

父组件通过 props 向下传递数据给子组件;子组件通过 events 给父组件发送消息。