首先Vue中子组件中不应该有值,所有的值,都应该从父组件中获取。但是怎么取呢?
直接调用父组件的data?显然行不通,因为根本获取不到。所以props出现了,Vue中子组件需要父组件的值,通过props。
重点:props的值是单向的,只能由父组件传递到子组件,避免父组件被子组件影响。
步骤如下:
1.先从父组件的data里找到要传递的值,然后在HTML部分也就是template部分绑定在子组件身上
<!--父组件-->
<template>
<div>
<hello-world2 :good = "good"></hello-world2> //向子组件传值
</div>
</template>
<script>
import helloWorld2 from "./HelloWorld2" //引用子组件页面
export default {
name: "HelloWorld3",
data() {
return {
good: "我是从hello word3传递过来的"
}
},
components: {
'hello-world2': helloWorld2 //注册子组件
},
}
</script>
2.子组件通过props【】里填写传来值的名字来接受,再通过插值语法,插入到子组件的HTML中。
<!--子组件-->
<template>
<div>{{good}}</div>
</template>
<script>
export default {
props: ['good'], //通过props获取父组件传递过来的值
data: function () {
return {}
},
methods: {}
}
</script>