Vue中父子传值的那些问题

父传子

1.父传子

​ **父：自定义属性名 + 数据（要传递）=> :value=“数据”
**

​ 子：props ["父组件上的自定义属性名“] =>进行数据接收

father.vue

<template>

  <div>

  我是爸爸：{{ message }}

  <hr />

  <Son :toSonData1="toSonData"></Son>

  :toSonDate1 于子组件props接受的名字相同

 </div>

</template>

 

<script>

import Son from "./components/son.vue";

export default {

 data() {

  return {

   message: "儿子你好",

   toSonData: "大嘴巴子", //给子组件的值

  };

 },
···


 components: {

  Son,

 },

};

</script>

<style lang='scss' scoped>

</style>

son.vue

<template>

  <div>

  我是儿子：{{ message }}

  <br />

  爸爸给我的礼物：{{ toSonData1 }}

 </div>

</template>

 

<script>

export default {

 props: ["toSonData1"], //第一种方式

 //  props: {

 //   //第二种方式

 //   toSonData: {

 //    type: String,

 //    default: function () {

 //     return "";

 //    },

 //   },

 //  },

 data() {

  return {

   message: "爸爸你好",

  };

 },

};

</script>

<style lang='scss' scoped>

</style>

子传父

2.子传父

子：this.$emit(‘自定义事件名称’, 数据) 子组件标签上绑定@自定义事件名称='回调函数’

父：methods: { 回调函数() { //逻辑处理 } }

father2.vue

<template>

  <div>

  我是爸爸：{{ message }}

  <br />

  儿子传来的值:{{ sendSonMessage }}

  <hr />

  <Son :toSonData="toSonData" @toFatherData="sendSonData"></Son>

  <!-- :toSonDate 给子组件传值 -->

 </div>

</template>

 

<script>

import Son from "./components/son2.vue";

export default {

 data() {

  return {

   message: "儿子你好",

   toSonData: "大嘴巴子", //给子组件的值

   sendSonMessage: "",

  };

 },



 components: {

  Son,

 },

 created() {

  this.sendSonData();

 },

 methods: {

  sendSonData(data) {

   console.log(data);

   this.sendSonMessage = data;

  },

 },

};

</script>

<style lang='scss' scoped>

</style>

son2.vue

<template>

  <div>

  我是儿子：{{ message }}

  <br />

  爸爸给我的礼物：{{ toSonData }}

  <br />

  <button @click="toFatherData">给爸爸传值</button>

 </div>

</template>

 

<script>

export default {

 props: ["toSonData"], //第一种方式

 //  props: {

 //   //第二种方式

 //   toSonData: {

 //    type: String,

 //    default: function () {

 //     return "";

 //    },

 //   },

 //  },

 data() {

  return {

   message: "爸爸你好",

  };

 },

 created() {

  this.toFatherData();

 },

 methods: {

  toFatherData() {

   this.$emit("toFatherData", "给爸爸的爱");

  },

 },

};

</script>

<style lang='scss' scoped>

,

 //    default: function () {

 //     return "";

 //    },

 //   },

 //  },

 data() {

  return {

   message: "爸爸你好",

  };

 },

 created() {

  this.toFatherData();

 },

 methods: {

  toFatherData() {

   this.$emit("toFatherData", "给爸爸的爱");

  },

 },

};

</script>

<style lang='scss' scoped>

</style>