Vue中的父子组件传值

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 会在浏览器的控制台中发出警告。

原文链接：https://v2.cn.vuejs.org/v2/guide/components-props.html