组件通讯(父传子与子传父)

父传子:自定义属性+props(父组件传数据,子组件接收数据)

• 父组件传值
• 语法: :自定义属性名1='需要传的值1' :自定义属性名2:'需要传的值2'

<template>
  <div>
    <p>我是父组件</p>
    <!-- 父传   自定义属性 -->
    <plane :data="name" :age="age"></plane> //:自定义属性='需要传的值'
  </div>
</template>
​
<script>
import plane from "./plane.vue";
export default {
  data() {
    return {
      name: "谷一一",
      age: 20,
    };
  },
  components: {
    plane,
  },
};
</script>
​
<style>
</style>

• 子组件接收

• 语法: props:['自定义属性名1','自定义属性名2',....]

  <template>
    <div>
      <h1>我是子组件</h1>
      {{ data }} {{ age }}
    </div>
  </template>
  ​
  <script>
  // 子接收  props
  export default {
    props: ["data", "age"],  //子组件接收父组件的数据
  };
  </script>
  ​
  <style>
  </style>
  

子传父:自定义事件+$emit(子组件传数据,父组件接收数据)

• 父接收

• 语法: @自定义事件名='函数'

  <template>
    <div>
      <p>我是父组件</p>
  ​
      <plane @aaa="fn"></plane>  //@自定义事件='函数'
    </div>
  </template>
  ​
  <script>
  import plane from "./plane.vue";
  export default {
    methods: { 
      fn(obj) {                //父组件接收子组件传过来的数据
        console.log(obj);
      },
    },
    components: {
      plane,
    },
  };
  </script>
  ​
  <style>
  </style>
  

• 子组件传数据
• 语法: $emit('自定义事件名',数据)

<template>
  <div>
    <h1>我是子组件</h1>
    <button @click="fn">点击更新年龄</button>
  </div>
</template>
​
<script>
// 子接收  props
export default {
  methods: {
    fn() {
      this.$emit("aaa", { age: 18 });    //子组件传数据   
    },
  },
};
</script>
​
<style>
</style>