Vue 父组件向子组件传值，传方法，传父组件整体

Posted 2020-11-17 chenyishi

父子组件传值

　　1.父组件调用子组件时绑定属性，例如-> :title="title"
　　2.子组件中在props中声明title：props:[‘title‘,‘msg‘]
　　3.就可以在子组件中引用title
　　Tips：避免父子组件传值时命名冲突

父子组件传方法方式一样
　　1.父组件调用子组件时绑定属性，例如-> :run="run"
　　2.子组件中props中声明run：props:[‘title‘,‘msg‘,‘run‘]
　　3.子组件中的button引用run方法
　　Tips：可将子组件的值，通过父组件的方法，传给父组件

可将父组件传给子组件
　　1.父组件调用子组件时绑定属性，例如-> :home="this"
　　2.子组件中props中声明home：props:[‘title‘,‘msg‘,‘run‘,‘home‘]
　　3.可在子组件方法中调用home组件的属性与方法：this.home.run() this.home.title

子组件中可以可在props验证父组件传过来的值的类型。
props:{
title:String
}

示例代码：

<template>
<div id="home">
    <v-header :title=‘title‘ :run=‘run‘ :home=‘this‘></v-header>
    <h5>这是Home组件</h5>
</div>
</template>
<script>
import Header from "./Header.vue";
export default {
  data() {
    return {
      msg: "123",
      title: 12333
    };
  },
  components: {
    "v-header": Header
  },
  methods: {
    run(da) {
      alert(da);
    }
  }
};
</script>
<style>
</style>

<template>
<div id="home">
    <h2>这是Header组件</h2>
    {{title}}
    <button @click="run(‘123‘)">我来执行父组件传递过来的值</button>
    <button @click="getParent()">我来获取传递过来的父组件</button>
</div>
</template>
<script>
export default {
  data() {
    return {
      msg: "123"
    };
  },
  methods: {
    getParent() {
      console.log(this.home);
      console.log(this.home.title);
    }
  },
  props: ["title", "run", "home"]
};
</script>
<style>
</style>