从父级初始化子级的变量

Posted 2023-02-23

【中文标题】从父级初始化子级的变量

【英文标题】：Initializing a variable of a child from a parent

【发布时间】：2020-06-10 07:15:04

【问题描述】：

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

家长：

<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>

提前感谢您的帮助！

【问题讨论】：

***.com/questions/39199303/…

我用props试了一下还是不行；(

【参考方案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>

【讨论】：

对不起，我修复的答案中有错字