Vue组件间通信，父传子方法，及props三种接收方式

目录

一、父组件给子组件传递数据（props方法）

二、props声明接收的三种方式

---

一、父组件给子组件传递数据（props方法）

1.在父组件中的子组件标签中，写入想要传递的数据，如果是data中的数据必须使用v-on动态绑定。如下所示，父组件需要给子组件传递name数据，前面为传递数据所用的名称，后面为真正需要传递的数据。

<template>
  <div>
    <h1>这是App父组件</h1>
    <!-- 2.在子组件标签中写入需要传入的数据，如为data中的数据则需要动态绑定-->
    <Children :name="name" />
  </div>
</template>

<script>
import Children from "./components/Children.vue";

export default {
  name: "App",
  data() {
    return {
      name: "张三", //1.准备需要传递给子组件的数据
    };
  },
  components: {
    Children,
  },
};
</script>

2.在子组件中使用props配置项声明接收后，就可以使用数据了

<template>
  <div class="demo1">
    <h1>这是子组件</h1>
    <!-- 2.使用父组件传递过来的name数据 -->
    <h2>父组件传递过来的数据：{{ name }}</h2>
  </div>
</template>

<script>
export default {
  name: "Children",
  props: ["name"], //1.使用props声明接收
};
</script>

二、props声明接收的三种方式

1.数组形式简单接收

  props: ["name"], //直接使用数组形式进行简单接收

2.对象形式，指定接收值的类型

 props: {
    name: String,  //接收的数据名称为name，值类型为字符串型
  },

3.指定验证要求

 props: {
    name: {
      type: String, //指定值类型
      required: true, //是否为必传项
      default: "李四", //默认值，如没有父组件没有传递，则默认name为李四
      //一般required与default不一起使用
    },
  },