Vue组件通信-->父与子组件通信

父子组件

如果一个组件A在组件B中被导入使用，称组件B是父组件，组件A是子组件 格式:

一. 父传子:

1.App.vue父组件代码图:

2.MyCom.vue子组件代码图:

步骤

1. 创建组件components/MyProduct.vue - 准备标签
2. 组件内再props定义变量, 用于接收外部传入的值
   props属性名建议都小写,因为标签里的属性只能小写/把变量驼峰转成-连接
3. App.vue中引入注册组件, 使用时, 传入具体数据给组件显示

小结

组件封装复用的标签和样式, 而具体数据要靠外面传入

vue单向数据流-不要修改props

在vue中需要遵循单向数据流原则

1.  在父传子的前提下，父组件的数据发生会通知子组件自动更新
2.  子组件内部，不能直接修改父组件传递过来的props => props是只读的

<template>
  <div style="border:1px solid #ccc; margin:5px;padding:5px">
    <h2>子组件</h2>
    <p>
      name: {{name}}
    </p>
    <p>
      hobby: {{hobby}}
    </p>
    <button @click="fn">修改props</button>
  </div>
</template>

<script>
export default {
  props: ['name', 'hobby'],
  methods: {
    fn(){
      // 直接去修改props ===> 改了父组件传来的数据
      // 这里打破 单向数据流的规则，vue能捕获到错误
      // this.name = '阿威队长'

      // 这里打破 单向数据流的规则，vue能不能捕获到错误
      // hobby是引用数据类型，push并没有修改 数组的地址
      this.hobby.push('小程序')
    }
  }
}
</script>

<style>

</style>

特殊说明

说明：*父组件传给子组件的是一个对象，子组件修改对象的属性，是不会报错的，对象是引用类型, 互相更新；但不能改变引用地址

小结

props的值不能重新赋值, 但是引用类型可以子改父

二.vue组件通信 子传父:

子传父是指：从子组件内部把数据传出来给父组件使用或者修改父组件数据

语法: 父组件中：< 子组件 @自定义事件名1="父methods函数1" @自定义事件名2="父methods函数2" />

• 子: this.$emit("自定义事件名1", 传值1) ---> 执行父methods里函数代码

1.左边 父组件 &右边 子组件 -->代码图:

小结

自定义事件 + $emit