组件关系分类

父子关系

可以使用props和$emit

父传子props

代码示例

<template>
  <div class="app" style="border: 3px solid #000; margin: 10px">
    我是APP组件
    <!-- 1.给组件标签，添加属性方式 赋值 -->
    <Son :content="parentContent"></Son>
  </div>
</template>

<script>
import Son from "./components/Son.vue"
export default {
  name: "App",
  components: {
    Son,
  },
  data() {
    return {
      parentContent: "父组件传入的content",
    }
  },
}
</script>

<style>
</style>

<template>
  <div class="son" style="border:3px solid #000;margin:10px">
    <!-- 3.直接使用props的值 -->
    我是Son组件 
    {{ content }}
  </div>
</template>

<script>
export default {
  name: 'Son-Child',
  // 2.通过props来接受
  props:["content"]
  
}
</script>

<style>

</style>

prop介绍

组件上注册的一些自定义属性，用于向子组件传递数据

props校验

为组件的prop指定验证要求

校验类型

非空校验

单向数据流

子传父$emit

<template>
  <div class="app" style="border: 3px solid #000; margin: 10px">
    我是APP组件
    <!-- 2.父组件监听子组件的事件,执行回调函数handleChange-->
    <Son :content="parentContent" @changeContent="handleChange"></Son>
  </div>
</template>

<script>
import Son from "./components/Son.vue"
export default {
  name: "App",
  components: {
    Son,
  },
  data() {
    return {
      parentContent: "父组件传入的content",
    }
  },
  methods:{
    changeContent(value){
      // 3.发生事件的回调函数 修改父组件的值
      this.parentContent = value
    }
  }
}
</script>

<style>
</style>

<template>
  <div class="son" style="border:3px solid #000;margin:10px">
    我是Son组件 
    {{ content }}
    <button @click="changeContent" >子组件修改content</button>
  </div>
</template>

<script>
export default {
  name: 'Son-Child',
  props:["content"],
  methods:{
    changeContent(){
      // 1.使用$emit 将修改事件传递给父组件
      this.$emit('changeContentFromSon','Son修改的内容')
    }
  }
  
}
</script>

<style>

</style>

非父子关系

可以使用provide和inject或者eventbus

provide inject 跨层级组件通信

provide 和 inject 可以跨层级共享数据

1.父组件使用provide提供数据

export default {
	provide () {
     return {
     		// 非对象的普通类型 【非响应式】  
            color: this.color,
            //对象形式的 复杂类型 【响应式】，通常要包装成对象
            userInfo:this.userInfo
     	}
    }
}

2.子孙组件使用inject取父组件使用provide提供的数据

export default {
	inject:[  ],
     created () {
     console.log(this.color,this.userInfo)
    }
}

eventbus

实现非父子组件之间的建简易消息传递(复杂场景使用VueX)

使用方式

1.创建一个都能访问到的事件总线(空的Vue实例) ,文件名EventBus.js放到utils目录

import Vue from 'vue'

const Bus = new Vue()
export default Bus

2.A组件(消息接收方)，监听Bus实例的事件

created () {
	Bus.$on('sendMsg',(msg) => {
    	this.msg = msg
    })
}

2.B组件(消息发送方)，监听Bus实例的事件

	Bus.$emit('sendMsg','发送消息')

通用解决方案Vuex

.syn修饰符