vue组件通信方式

props

情景：父组件给子组件传数据

①父传子（函数）：实际为子组件传数据给父组件

②父传子（非函数）：实际为父组件传数据给子组件

子组件
①export default {
  props: {
    key:value
  }
}
父组件
<p>
　　<SonComponent key="value" />
<p/>

自定义事件

情景：子组件给父组件传数据

子组件
export default {
    methods:{
        fn(){
            //触发自定义事件
            this.$emit('eventName',value1,value2,...,value3)
        }
    }
}
父组件
<sonComponent @eventName='function'></sonComponent >

export default {
  name: 'App',
  components:{sonComponent }, 
  methods:{ 
     function(value,...values){ 
　　　　　　... 
　　　}
  } 
}

全局事件总线

情景：万能通用

main.js:

new Vue({
    render: h => h(App),
    beforeCreate(){
        Vue.prototype.$bus = this    //安装全局事件总线
    }
})
TestA.vue
//绑定自定义事件
mounted(){
  this.$bus.$on('eventName', (values)=>{
    ...
  })
}
TestB.vue
//出触发自定义事件
 methods:{
  functionName(){
    this.$bus.$emit('eventName', values);
  }
},

 

消息订阅与发布

情景：万能通用

vue使用较少，属于第三方库

npm i pubsub-js

TestA.vue
//订阅消息
mounted(){
  this.pubid = pubsub.subscribe("hello",(msgName,data)=>{
      ...  
    })  
}，
//组件销毁前，取消订阅，释放内存
beforeDestroy(){
　　pubsub.unsubscribe(this.pubid)
}
TestB.vue
//提供数据
methods:{
  functionName(){
    pubsub.publish("hello",data)      
  }  
}

 

vuex

情景：万能通用，使用较多

testA.js
//设置仓库

const state={}
const mutations={}
cosnt actions={}
const getters={}
export default {
  state,
  mutations,
  actions,
  getters  
}
testA.js
//配置仓库
import {reqInfo} from 'api.js'
//actions中请求数据
const actions = {
    async getInfo({commit}) {
        let result = await reqInfo()
        if (result.code === 200) {
            commit("GETINFO", result.data)
            return 'ok'
        } else {
            return Promise.reject(new Error(data.message))
        }
    }
}
//state中配置数据存放数据结构
const state = {
    info:{}  
}
//mutations将actions的得到的数据存放到state中
const mutations = {
    GETINFO(state, data) {
        state.info= data
    }
}
testA.vue
//组件派发请求

mounted(){
  this.store.dispatch('getInfo')  
}

 

插槽slot

情景：万能

 

 

 

----深入----

 v-model

原理：自定义事件和props相结合

TetsA.vue

<p>
    <TestB  :value="msg" @input="msg=$event"/>
    <TestB v-model='msg' />
</p>

exort default{
  data(){
    return{
      msg:''
    }
  }        
}
TestB.vue

<input :value="value" @input="$emit('input',$event.target.value)">

export default{
  props:['value']  
}

 

sync属性

vue规定

子组件不能修改props数据

$emit可以触发事件并传参

$event可以获得$emit参数

Son.vue 

//子组件通过点击，改变money值
//子组件不可以修改props数据，需要返回数据让父组件修改

<button @click="$emit('update:money',money-100)">spend</button>

export default{
  props:["money"]
}
Fathser.vue

//使用sync语法糖，相当于
//<Son  :money="total" @update:money="total=$event" />
<Son   :money.sync="total" />

data(){
  return{
       total:1000
    }  
}

 

$attrs和 $listeners

$attrs 子组件获取到父组件传递的数据

v-bind="$attrs"

$listeners 子组件获取到父组件传递的自定义事件

v-on="$listeners"

注意：没有简写形式

 

$children和$parent

$children 父组件获取到子组件节点，形成数组。操作子组件时不能用数组【】方式，需要用forEach（）

$parent 子组件获取父组件节点

获取后可以直接操作组件数据

posted @ 2022-11-24 14:27  Karle  阅读(33)  评论(0)    收藏  举报