vue3.0 子組件如何修改父組件傳遞過來的值

更新時間：2022年04月29日 10:18:42 作者：昵稱老重復(fù)

這篇文章主要介紹了vue3.0 子組件如何修改父組件傳遞過來的值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

子組件修改父組件傳遞過來的值

vue 的子組件不是不能直接更改父組件的值，需要將props 的值給到子組件，后再修改，

否則：Unexpected mutation of “props” prop.

vue3提供了一個解決：toRefs：https://v3.cn.vuejs.org/api/refs-api.html#torefs

toRefs 非常有用，這樣消費組件就可以在不丟失響應(yīng)性的情況下對返回的對象進行解構(gòu)/展開

使用

const { foo, bar } = reactive({
? ? foo: 1,
? ? bar: 2
})
// 核心解決, 使用reactive接收不會響應(yīng)時更新，需要使用toRefs
const props = defineProps({
? ? drawerStatus: {
? ? ? ? type: Boolean
? ? }
})
const {drawerStatus} = toRefs(props)

使用toRefs進行解決

<template>
? ? <el-drawer v-model="drawerStatus" title="設(shè)置部門助理" :before-close="handleClose">
? ? ? ? <div class="drawer-footer">
? ? ? ? ? ? <el-button>取消</el-button>
? ? ? ? ? ? <el-button type="primary" @click="onSubmit">確定</el-button>
? ? ? ? </div>
? ? </el-drawer>
? ??
</template>

<script setup>
import {reactive, toRefs} from 'vue'
const props = defineProps({
? ? drawerStatus: {
? ? ? ? type: Boolean
? ? }
})
const emits = defineEmits(['upDrawerStatus'])
const {drawerStatus} = toRefs(props)
console.log(33333333, drawerStatus)
// 新增角色數(shù)據(jù)
const formData = reactive({
})
const onSubmit = () => {
? ? handleClose()
}
const handleClose = () => {
? ? console.log('關(guān)閉抽屜')
? ? emits('upDrawerStatus', false)
}
</script>

子組件向父組件傳值emit的使用注意事項

子組件的寫法

需要從setup函數(shù)中引出{emit}

<template>
? <div id="center" v-if="isShow">
? ? <h2><slot>my model</slot></h2>
? ? <el-button type="primary" @click="btnclose">傳遞事件</el-button>
? ? <el-button type="primary" @click="btnparents">子組件觸發(fā)父組件的方法</el-button>
? </div>
</template>

<script lang="ts">
import {
? defineComponent,getCurrentInstance
} from "vue";
export default defineComponent({
? props: {
? ? isShow:{
? ? ? type:Boolean,
? ? ? default:true
? ? }
? },
? emits: {
? ? "my-close": null,
? },
? setup(props, {emit}) {
? ? const {proxy}:any=getCurrentInstance()
? ? const btnclose = () => {
? ? ? emit("my-close",'傳遞的數(shù)據(jù)')
? ? }
? ? const btnparents=()=>{
? ? ? console.log(proxy);
? ? ? proxy.$parent.addNum()
? ? }
? ? return {
? ? ? btnclose,
? ? ? proxy,
? ? ? btnparents
? ? };
? },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
? margin: 40px 0 0;
}
ul {
? list-style-type: none;
? padding: 0;
}
li {
? display: inline-block;
? margin: 0 10px;
}
a {
? color: #42b983;
}
</style>

父組件使用

<template>
? <HelloWorld @my-close="myModealHide" :isShow="myModalShow">solt</HelloWorld>
? <el-button @click="myModalBlock">my modal2</el-button>
? <el-button type="primary" @click="toDelit">用戶詳情</el-button>
</template>

<script lang="ts">
import { defineComponent, computed, onMounted, watch,ref,getCurrentInstance,reactive,nextTick ,toRefs} from 'vue'
import {
? useStore,
? mapState,
} from 'vuex'
import {useRoute,useRouter,useLink,UseLinkOptions} from "vue-router"
import { useI18n } from "vue-i18n";
import {data} from "@/utils/TypeState"
import HelloWorld from '@/components/HelloWorld.vue'
export default defineComponent({
? components:{
? ? HelloWorld
? },
? setup(props, context){
? ? console.log('context',context);
? ? const store=useStore()
? ? const {proxy}:any=getCurrentInstance()
? ? const number=ref<string|Number>(store.state.app.age)
? ? const Route=useRoute()
? ? const RouteLink=useLink
? ? const { t } = useI18n();
? ? const languageD=()=>{
? ? ? proxy.$i18n.locale=data.seleLanguage
? ? }
? ? console.log(store.state.app.allMenuList instanceof ?Array);
? ? console.log(proxy);
? // 監(jiān)聽指定基礎(chǔ)類型數(shù)據(jù)
? ? const addNum=()=>{
? ? ? // ?name.value=Number(name.value) +1
? ? ? name.value++
? ? }
? ? watch(name, (now, prev) => {
? ? ? ? ? console.log(now, prev, 'count')
? ? })
? ? // 監(jiān)聽reactive創(chuàng)建的響應(yīng)式變量,可以直接監(jiān)聽對象，必須使用內(nèi)聯(lián)函數(shù)
? ? watch(() => data.tableData, (now, prev) => {
? ? ? console.log(now, prev, 'tableData')
? ? })
? ? const myModalShow = ref(false)
? ? const myModealHide=(val:any)=>{
? ? ? myModalShow.value=false
? ? ? console.log(val);
? ? }
? ? const myModalBlock =()=>{
? ? ? myModalShow.value=true
? ? }
? ? const toDelit=():void=>{
? ? ? proxy.$router.push("/userAdminDetils")
? ? }
? ? return {
? ? ? age,
? ? ? number,
? ? ? proxy,
? ? ? store,
? ? ? name,
? ? ? addNum,
? ? ? ...toRefs(data) ,
? ? ? t,
? ? ? languageD,
? ? ? myModealHide,
? ? ? myModalBlock,
? ? ? myModalShow,
? ? ? toDelit
? ? }
? },
? created () {
? ? console.log(this.$route);
? ? console.log(this.store.state.app.age);
? ? // console.log(this.$store);//報錯
? }
})
</script>
<style>
</style>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: