|
方式一：
props：父组件可以通过该方式将数据传递给子组件
示例：
//父组件
<BlogPost :title="post.title" />
//子组件
export default {?
? ? ...
? ? props: {?
?? ?? ?title: String,
?? ?? ?defalut: ''
? ? }
? ? ...?
}
//子组件使用
<h2>{{ title?}}</h2>
方式二：
父组件首先给子组件传递一个函数类型的props，然后子组件调用该函数给父组件传值。
该
方式只适用于父子组件中
父组件中：
<School :getSchoolName="getSchoolName"/>
methods: {
?? ?getSchoolName(name){
?? ??? ?console.log('App收到了学校名：',name)
?? ?}
}
子组件中：
<button @click="sendSchoolName">把学校名给App</button>
props:['getSchoolName'],
data() {
?? ?return {
?? ??? ?name:'学校名称'
?? ?}
},
methods: {
?? ?sendSchoolName(){
//通过props中的函数将学校名传给App父组件。
//这得需要父组件先给子组件一个函数类型的props，子组件调用这个函数，将数据传递出去
?? ??? ?this.getSchoolName(this.name)
?? ?}
}
方式三：
通过自定义事件实现组件间通信，
该方式适用于父子组件间
父子组件之间的访问方式：
1、父组件访问子组件：$refs：开发中常用
ref:用来给元素或者子组件注册引用信息
2、子组件访问父组件：$parent ，在开发中尽量少用，组件复用性很高！从这个父组件中拿到的属性，在其他父组件中可能没有这个属性
3、子组件访问根组件：$root
父组件中：
写法1：
<Student @getStudentName="getStudentName"/>
methods: {
?? ?getStudentName(name, ...params){
?? ??? ?console.log('App收到了学生名：',name,params)
?? ?}
}
写法2：
<Student ref="student" />
methods: {
????getStudentName(name,...params){
????????console.log('App收到了学生名：',name,params)
????}
},
mounted() {
????this.$refs.student.$on('getStudentName',this.getStudentName) //绑定自定义事件
}
子组件中：
<button @click="sendStudentName">把学生名给App</button>
data() {
?? ?return {
?? ??? ?name:'张三'
?? ?}
},
methods: {
?? ?sendStudentName(){
?? ??? ?//触发Student组件实例身上的getStudentName事件
?? ??? ?this.$emit('getStudentName',this.name,666,888,900)
?? ?}
}
方式四：
通过全局事件总线实现组件间通信，
该方式适用于任何组件间
main.js中安装全局事件总线：
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//创建vm
new Vue({
????el:'#app',
????render: h => h(App),
????beforeCreate() {
????????Vue.prototype.$bus = this //安装全局事件总线
????},
})
消息接收者：
mounted() {
?? ?this.$bus.$on('hello',(data)=>{
?? ??? ?console.log('我是School组件，收到了数据',data)
?? ?})
},
beforeDestroy() {
?? ?this.$bus.$off('hello')
}
消息发送者：
<button @click="sendStudentName">把学生名给School组件</button>
data() {
?? ?return {
?? ??? ?name:'张三'
?? ?}
},
methods: {
?? ?sendStudentName(){
?? ??? ?this.$bus.$emit('hello',this.name)
?? ?}
}
方式五：
消息的发布于订阅，
该方式适用于任何组件间。这里使用pubsub实现消息的订阅与发布
先安装pubsub-js：npm i pubsub-js
消息订阅者school.vue:
<script>
????import pubsub from 'pubsub-js'
????export default {
????????name:'School',
????????data() {
????????????return {
????????????????name:'学校名称',
????????????????address:'地址',
????????????}
????????},
????????mounted() {
????????????this.pubId = pubsub.subscribe('hello',(msgName,data)=>{//订阅消息
? ? ? ? ? ? ? ? console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
????????????})
????????},
????????beforeDestroy() {
????????????pubsub.unsubscribe(this.pubId) //取消订阅
????????},
????}
</script>
消息发布者student.vue:
<template>
????<div class="student">
????????<h2>学生姓名：{{name}}</h2>
????????<h2>学生性别：{{sex}}</h2>
????????<button @click="sendStudentName">把学生名给School组件</button>
????</div>
</template>
<script>
????import pubsub from 'pubsub-js'
????export default {
????????name:'Student',
????????data() {
????????????return {
????????????????name:'张三',
????????????????sex:'男',
????????????}
????????},
????????methods: {
????????????sendStudentName(){//发布消息
????????????????pubsub.publish('hello',666)
????????????}
????????},
????}
</script>
方式六：
通过Vuex实现组件间的通信，
该方式适用于任何组件间
安装Vuex：
npm install vuex --save?????????????//默认安装Vuex4
//npm install vuex@3 --save???????????//安装Vuex3
//tips：默认安装的时Vuex4，但是Vue2只能使用Vuex3；Vue3使用Vuex4
使用：
main.js:
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入store
import store from './store'
//关闭Vue的生产提示
Vue.config.productionTip = false
//创建vm
new Vue({
????el:'#app',
????render: h => h(App),
????store
})
src/store/count.js:
//求和相关的配置
export default {
????namespaced:true,
????actions:{
????????jiaOdd(context,value){
????????????console.log('actions中的jiaOdd被调用了')
????????????if(context.state.sum % 2){
????????????????context.commit('JIA',value)
????????????}
????????},
????????jiaWait(context,value){
????????????console.log('actions中的jiaWait被调用了')
????????????setTimeout(()=>{
????????????????context.commit('JIA',value)
????????????},500)
????????}
????},
????mutations:{
????????JIA(state,value){
????????????console.log('mutations中的JIA被调用了')
????????????state.sum += value
????????},
????????JIAN(state,value){
????????????console.log('mutations中的JIAN被调用了')
????????????state.sum -= value
????????},
????},
????state:{
????????sum:0, //当前的和
????????school:'学校',
????????subject:'学科',
????},
????getters:{
????????bigSum(state){
????????????return state.sum*10
????????}
????},
}
src/store/person.js:
//人员管理相关的配置
import axios from 'axios'
import { nanoid } from 'nanoid'
export default {
????namespaced:true,
????actions:{
????????addPersonWang(context,value){
????????????if(value.name.indexOf('王') === 0){
????????????????context.commit('ADD_PERSON',value)
????????????}else{
????????????????alert('添加的人必须姓王！')
????????????}
????????},
????????addPersonServer(context){
????????????axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
????????????????response => {
????????????????????context.commit('ADD_PERSON',{id:nanoid(),name:response.data})
????????????????},
????????????????error => {
????????????????????alert(error.message)
????????????????}
????????????)
????????}
????},
????mutations:{
????????ADD_PERSON(state,value){
????????????console.log('mutations中的ADD_PERSON被调用了')
????????????state.personList.unshift(value)
????????}
????},
????state:{
????????personList:[
????????????{id:'001',name:'张三'}
????????]
????},
????getters:{
????????firstPersonName(state){
????????????return state.personList[0].name
????????}
????},
}
src/store/index.js:
//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
import countOptions from './count'
import personOptions from './person'
//应用Vuex插件
Vue.use(Vuex)
//创建并暴露store
export default new Vuex.Store({
????modules:{
????????countAbout:countOptions,
????????personAbout:personOptions
????}
})
count.vue:?
模块化+命名空间-->借助四个map辅助函数
<template>
????<div>
????????<h1>当前求和为：{{sum}}</h1>
????????<h3>当前求和放大10倍为：{{bigSum}}</h3>
????????<h3>我在{{school}}，学习{{subject}}</h3>
????????<h3 style="color:red">Person组件的总人数是：{{personList.length}}</h3>
????????<select v-model.number="n">
????????????<option value="1">1</option>
????????????<option value="2">2</option>
????????????<option value="3">3</option>
????????</select>
????????<button @click="increment(n)">+</button>
????????<button @click="decrement(n)">-</button>
????????<button @click="incrementOdd(n)">当前求和为奇数再加</button>
????????<button @click="incrementWait(n)">等一等再加</button>
????</div>
</template>
<script>
????import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
????export default {
????????name:'Count',
????????data() {
????????????return {
????????????????n:1, //用户选择的数字
????????????}
????????},
????????computed:{
????????????//借助mapState生成计算属性，从state中读取数据。（数组写法）
????????????...mapState('countAbout',['sum','school','subject']),
????????????...mapState('personAbout',['personList']),
????????????//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
????????????...mapGetters('countAbout',['bigSum'])
????????},
????????methods: {
????????????//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
????????????...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
????????????//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
????????????...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
????????},
????????mounted() {
????????????console.log(this.$store)
????????},
????}
</script>
<style lang="css">
????button{
????????margin-left: 5px;
????}
</style>
person.vue:?
模块化+命名空间-->原生写法
<template>
????<div>
????????<h1>人员列表</h1>
????????<h3 style="color:red">Count组件求和为：{{sum}}</h3>
????????<h3>列表中第一个人的名字是：{{firstPersonName}}</h3>
????????<input type="text" placeholder="请输入名字" v-model="name">
????????<button @click="add">添加</button>
????????<button @click="addWang">添加一个姓王的人</button>
????????<button @click="addPersonServer">添加一个人，名字随机</button>
????????<ul>
????????????<li v-for="p in personList" :key="p.id">{{p.name}}</li>
????????</ul>
????</div>
</template>
<script>
????import {nanoid} from 'nanoid'
????export default {
????????name:'Person',
????????data() {
????????????return {
????????????????name:''
????????????}
????????},
????????computed:{
????????????personList(){
????????????????return this.$store.state.personAbout.personList
????????????},
????????????sum(){
????????????????return this.$store.state.countAbout.sum
????????????},
????????????firstPersonName(){
????????????????return this.$store.getters['personAbout/firstPersonName']
????????????}
????????},
????????methods: {
????????????add(){
????????????????const personObj = {id:nanoid(),name:this.name}
????????????????this.$store.commit('personAbout/ADD_PERSON',personObj)
????????????????this.name = ''
????????????},
????????????addWang(){
????????????????const personObj = {id:nanoid(),name:this.name}
????????????????this.$store.dispatch('personAbout/addPersonWang',personObj)
????????????????this.name = ''
????????????},
????????????addPersonServer(){
????????????????this.$store.dispatch('personAbout/addPersonServer')
????????????}
????????},
????}
</script>
方式七：
Vue3中的provide和inject（依赖注入），
适用于
祖先组件和后代（孙子）组件
祖先组件和儿子组件中也可用，但没必要；props更简单方便
示例：
祖先组件（祖）：
<template>
????<div class="app">
????????<h3>我是App组件（祖），{{name}}--{{price}}</h3>
????????<Child/>
????</div>
</template>
<script>
????import { reactive,toRefs,provide } from 'vue'
????import Child from './components/Child.vue'
????export default {
????????name:'App',
????????components:{Child},
????????setup(){
????????????let car = reactive({name:'奔驰',price:'40W'})
????????????provide('car',car) //给自己的后代组件传递数据
????????????return {...toRefs(car)}
????????}
????}
</script>
<style>
????.app{
????????background-color: gray;
????????padding: 10px;
????}
</style>
后代组件（孙）：
<template>
????<div class="son">
????????<h3>我是Son组件（孙），{{car.name}}--{{car.price}}</h3>
????</div>
</template>
<script>
????import {inject} from 'vue'
????export default {
????????name:'Son',
????????setup(){
????????????let car = inject('car')
????????????return {car}
????????}
????}
</script>
<style>
????.son{
????????background-color: orange;
????????padding: 10px;
????}
</style>
学习不仅仅是只会学，还要会总结和复习！
如有不当，请留言指正！！！
|