10. vue2 父组件向子组件传值

一、 父组件如何向子组件传值

1.1 父组件调用子组件的时候绑定动态属性

<v-header :title="title"></v-header>

1.2 在子组件里面通过 props 接收父组件传过来的数据

<script>
 export default {
 	props: ['title']
 }
</script>

二、 示例

2.1 父组件

<template>
  <!-- 所有的内容要被根节点包含起来 -->
  <div id="home">
    <v-header :title="title" :homemsg="msg" :run="run" :home="this"></v-header>
    <hr />
    首页组件
  </div>
</template>

<script>
import Header from "./Header.vue";

export default {
  data() {
    return {
      msg: "我是一个home组件",
      title: "首页111",
    };
  },
  components: {
    "v-header": Header,
  },
  methods: {
    run(data) {
      alert("我是Home组件的run方法" + data);
    },
  },
};
</script>

<style lang="scss" scoped>
/*css  局部作用域  scoped*/

h2 {
  color: red;
}
</style>

2.2 子组件

<template>
  <div>
    <h2>我是头部组件--{{ title }}---{{ homemsg }}</h2>

    <button @click="run('123')">执行父组件的方法</button>

    <br />
    <br />

    <button @click="getParent()">获取父组件的数据和方法</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "子组件的msg",
    };
  },
  methods: {
    getParent() {
      // 获取父组件的属性
      alert(this.home.title);
      // 运行父组件的方法
      this.home.run();
    },
  },
  props: ["title", "homemsg", "run", "home"],
};
</script>

三、 Prop 验证

3.1 可以为组件的 prop 指定验证要求

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

3.2 prop 类型

type 可以是下列原生构造函数中的一个：

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol