从父级初始化子级的变量

Question

我的父组件中有一个变量，希望将其发送到子组件。 我尝试了几种方法，但没有任何效果，这是我的代码：

家长：

<template>
    <Widget/>
</template>

<script>
import Widget from './Widget'

export default {
    data () {
        return {
            model: {
                data: 'data send !'
            }
        }
    },
    components: {
        Widget
    },
    methods: {
    }
}
</script>

孩子：

<template>
    <div class="row">
        <div class="box">
            <p> {{data}} </p>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            data: '111'
        }
    }
}
</script>

<style scoped>
.box {
  box-shadow: 10px 10px 5px grey;
}
</style>

提前感谢您的帮助！

Answer 1

要将数据绑定到子组件，您可以使用props。

家长：

<template>
  <Widget :data="model.data"/>
</template>

<script>
import Widget from "./Widget";

export default {
  data() {
    return {
      model: {
        data: "data send !"
      }
    };
  },
  components: {
    Widget
  },
  methods: {}
};
</script>

孩子：

<template>
  <div class="row">
    <div class="box">
      <p>{{data}}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: ["data"]
};
</script>

<style scoped>
.box {
  box-shadow: 10px 10px 5px grey;
}
</style>