Vue中父组建向子组件传值的方法

父组件向子组件传值

• 在父组件中声明需要传递的参数

<script>
import Sonpart from "./SendReceive.vue";
    export default {
      data() {
       return {
         title: "我叫路飞", 
         destation: "要成为海贼王的男人",
         };
    },
    components: {
      Sonpart,
    },
};

</script>

• 在子组件中使用props 声明自己想要的参数

<template>
    <div>
        <span>名字:{{ name }}</span>
        <span>简介:{{ destation }}</span>
    </div>
</template>
 <script>
    export default {
       props: ["name", "destation"],
    };
</script>

• 在父组件的模板中传递父组件中定义的值

<template>
    <div>
        <sonpart :name="title" :destation="destation"></sonpart>
    </div>
</template>

保存输出：

对于子模板中props的定义 不仅仅可以是数组 也可以是一个对象

  props: {
    title: {
        type: String,
        default: "hello 路飞", // 默认值
        require: true, // 是否是必传参数
    },
},

• 这里结果是一样的 具体如何定义需要结合自己的使用场景