Vue中的父子组件传值
今天在写项目时，子组件是一个折线题，然后在首页dashboard中定义了一个父组件来引用这个折线图，但是呢在父组件这里写了一个单选框，这个单选框就是一个时间范围，每次改变时间范围时需要把这个选择的时间范围（类型为字符串）传递给子组件，然后从子组件所在的页面去获取筛选时间范围内的数据。
在dashboard页面：
<template>
<div>
<div style="margin-left: 80%;">
<el-radio-group v-model="assetRange" size="mini" @change="change">
<el-radio-button label="今日"></el-radio-button>
<el-radio-button label="近7日"></el-radio-button>
<el-radio-button label="近30日"></el-radio-button>
<el-radio-button label="近90天"></el-radio-button>
</el-radio-group>
</div>
<line-chart :assetRange="assetRange"/>
</div>
</template>
<script>
import LineChart from './components/LineChart' // 这个子组件就在当前目录下的components目录下的LineChart.vue文件中
export default {
data() {
return {
assetRange: "今日", //资金曲线时间范围，默认今日
}
},
methods: {
change(e){
this.assetRange = e; // 单选框的事件change触发时更新值
}
}
}
</script>
主要就是在子组件中接受值：
<template>
<div :assetRange="assetRange" />
</template>
<script>
export default {
props: {
assetRange: String // 在这个props里接收父组件传过来的值，写明其类型
}
}，
data() { // data里不需要再写这个asstRange了
return {
chart: null,
}，
methods: {
console.log("assetRange: ", this.assetRange); // methods中的方法里面可以直接调用
}
},
</script>
关于父子组件传值：
单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
