vue3语法糖 组件间通信

一.父传子（prop）

1.父组件：cc.vue

<template>
    <div>
    <h2>组件通信的几种方式</h2>
        <div class="fatherOne">
            <div>
                <ccSonOne :msg2=msg2></ccSonOne>a
            </div>
        </div>
    </div>
</template>
 
<script setup>
import {ref} from "vue"
import ccSonOne from "../components/ccSonOne.vue"
const msg2 = ref("我是父亲") 
</script>

2.子组件：ccSonOne.vue

<template>
    <div>
        <span>我是c页面的一个儿子，我接受到父亲的动态值为：{{msg2}}</span>
    </div>
</template>
 
<script setup>
    const props = defineProps({
        msg2:{
            type:String,
            default:"hh"
        }
    })
</script>

二：子传父

1.父组件：cc.vue

<template>
    <div>
    <h2>组件通信的几种方式</h2>
        <div class="fatherOne">
            <div>
                <ccSonOne @sonData="getmsg" ></ccSonOne>
                <span>儿子传递过来的值：{{getData}}</span>
            </div>
        </div>
    </div>
 
</template>
<script setup>
import {ref} from "vue"
import ccSonOne from "../components/ccSonOne.vue"
const getData =  ref("2")
const getmsg = (sonData) => {
    getData.value = sonData
}
</script>

2.子组件：ccSonOne.vue

<template>
    <div>
        <button @click="sendmsg">点我给父亲传值</button>
    </div>
</template>
<script setup>
import {ref} from "vue"
const msg = ref("我是儿子")
const emit = defineEmits(['sonData'])
const sendmsg = () => {
    emit("sonData", msg.value)
}
</script>

 三.expose、ref（获取子组件属性和方法）

1.cc.vue

<template>
    <div>
    <h2>组件通信的几种方式</h2>
        <div class="fatherOne">
            <div>
                <ccSonOne ref="comp"></ccSonOne>
                <button @click="getAttribute">点击获取子组件的属性和方法</button>
                <br>
                <span>{{getAttributeData}}</span>
            </div>
        </div>
    </div>
 
</template>
 
<script setup>
import {ref} from "vue"
import ccSonOne from "../components/ccSonOne.vue"
const comp = ref(null)
const getAttributeData = ref("")
const getAttribute = () => {
    getAttributeData.value=comp.value.attributeone,
    comp.value.functionOne()
}
</script>

2.ccSonOne.vue

<template>
    <div>
    </div>
</template>
 
<script setup>
import {ref} from "vue"
const attributeone = ref("我是子组件属性")
const functionOne = () =>{
    console.log("我是子组件方法")
}
defineExpose({
    attributeone:attributeone.value,
    functionOne,
})
</script>

四、provide/inject

provide/inject是 Vue 中提供的一对 API。无论层级多深，API 都可以实现父组件到子组件的数据传递。

示例代码如下所示

父组件

<template>
  <!-- child component -->
  <child-components></child-components>
  <!-- parent component -->
  <div class="child-wrap input-group">
    <input
      v-model="value"
      type="text"
      class="form-control"
      placeholder="Please enter"
    />
    <div class="input-group-append">
      <button @click="handleAdd" class="btn btn-primary" type="button">
        add
      </button>
    </div>
  </div>
</template>
<script setup>
import { ref, provide } from 'vue'
import ChildComponents from './child.vue'
const list = ref(['JavaScript', 'HTML', 'CSS'])
const value = ref('')
// Provide data to child components.
provide('list', list.value)
// event handling function triggered by add
const handleAdd = () => {
  list.value.push(value.value)
  value.value = ''
}
</script>

子组件

<template>
  <ul class="parent list-group">
    <li class="list-group-item" v-for="i in list" :key="i">{{ i }}</li>
  </ul>
</template>
<script setup>
import { inject } from 'vue'
// Accept data provided by parent component
const list = inject('list')
</script>

五、vuex

1.store/index.ts

// store/index.ts
import { createStore } from 'vuex'
import api from '../api/user'
//创建存储对象
const store = createStore({
  // 需要存储的值都放在这里面
  state() {
    return {
      // 在视图中通过$store.state.count来获取
      count: 1,
      sysToken:'1987',
      stateData:''
    }
  },
  // 在其他视图中通过 $store.commit('setState', 10) 使用，用于修改stor存的值
  mutations: {
    // 只能接受两个参数，用于修改store存的值
    increment(state: any) {
      state.count++
    },
    // 获取sysToken
    SET_SYSTOKEN: (state, token) => {
      state.sysToken = token;
    },
    SET_DATA:(state, data) => {
     state.stateData = data
    }

  },
  // 相当于组件的计算属性 通过 $store.getters.doubleCount 获取计算后的值
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  },
  // 异步任务 不会改变state 通过 $store.dispath('doubleCount') 使用
  actions: {
    doubleCount(context) {
      context.commit('doubleCount')
    },
    setAsyncCount({commit}:ActionContext<userState>){
      setTimeout(() => {
          console.log(commit)
      }, 1000);
   },
   async getSoftDetailAssets({ commit }, id: String) {
    let datail:any = await api.getSoftDetailAssets({id:id})
    console.log(datail)
    commit('SET_DATA', datail)
  }
  },
  // store的下级store 方便大型项目复杂数据管理，这里面相当于可以在放置一个和外面这些一样的模块
  modules: {}
})

export default store

2.使用

<template>
    <div>
        <h2>组件通信的几种方式</h2>
        <div class="fatherOne">
            <div>
                <p>Vuex Test</p>
                <p>{{ gettersCount }}</p>
                <p>state-count --- {{ sysToken}}</p>
                <p>{{ count }}</p>

                <button @click="handleAdd" class="btn btn-primary" type="button">
                            add
                </button>
            </div>
        </div>
    </div>
</template>
 
<script setup>
import { ref, provide } from "vue"
import ccSonOne from "../components/ccSonOne.vue"

import { useStore } from "vuex";
const store = useStore();
let sysToken= computed(() => {
    return store.state.sysToken;
});
let gettersCount = computed(() => {
    return store.getters.doubleCount
});

let count = computed(() => {
    return store.state.count
});
console.log(sysToken.value,gettersCount.value)
let token=ref("123456")
store.commit("SET_SYSTOKEN", token.value);
store.dispatch("setAsyncCount","123");
const handleAdd = () => {
    store.commit('increment')
}
store.dispatch("getSoftDetailAssets","1678324424013033");

</script>