【4 Vue组件化 – 组件间通信】

1 父子组件之间通信的方式

2 父组件嵌套子组件

3 父组件传递数据给子组件

通过props传递数据(数组语法)

1 父组件在创建子组件时给子属性的自定义属性赋值

2 子组件通过props接收父组件传递过来的数据

通过props传递数据(对象语法)

props: {
      name: {
        type: String,
        default: "我是默认name"
      },
      age: {
        //类型
        type: Number,
        //是否必须
        required: true,
        //默认值
        default: 0
      },
      height: {
        type: Number,
        default: 2
      },
      // 重要的原则: 对象类型写默认值时, 需要编写default的函数, 函数返回默认值
      friend: {
        type: Object,
        default() {
          return { name: "james" }
        }
      },
      hobbies: {
        //数组属于对象类型
        type: Array,
        default: () => ["篮球", "rap", "唱跳"]
      },
      showMessage: {
        type: String,
        default: "我是showMessage"
      }
    }
  }

4 子组件传递给父组件

自定义事件的流程

类似发出和监听通知
子组件监听事件,监听到之后发出通知事件和参数,父组件监听事件和接收参数,执行父组件的事件

子组件代码

<template>
  <div class="sub">
    <button @click="btnClick(1)">-1</button>
    <button @click="btnClick(5)">-5</button>
    <button @click="btnClick(10)">-10</button>
  </div>
</template>

<script>
  export default {
    methods: {
      btnClick(count) {
      //发出事件和参数
        this.$emit("sub", count)
      }
    }
  }
</script>

<style scoped>
</style>

父组件代码

<!-- 2.自定义sub-counter, 并且监听内部的sub事件 -->
    <sub-counter @sub="subBtnClick"></sub-counter>
  </div>
</template>

<script>
  import SubCounter from './SubCounter.vue'

  export default {
    components: {
      SubCounter
    },
    data() {
      return {
        counter: 0
      }
    },
    methods: {
      subBtnClick(count) {
        this.counter -= count
      }
    }
  }
</script>