vue3 之组件间事件通信(v-model)

vue3 父子组件采用v-model传值(传多个值)

-- 本文只写了父子组件通过 v-model 进行传值更新 

单个传值

父组件

 //  html
 <Child v-model="money"></Child>
 // js
 <script setup lang="ts">
 import { ref } from 'vue';
 import Child from './child.vue';
 const money = ref(10000);
 </script>
 

子组件

// html
<el-button @click="updataModeVal">父子组件数据同步</el-button>
<div>{{ modelValue }}</div>
// js
// modelValue 特殊
<script setup lang="ts">
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const updataModeVal = () => {
  emit('update:modelValue', props.modelValue + 100000)
}
// ts写法 
const props = withDefaults(defineProps<Props>(), {
  money: null
})
const emit = defineEmits(['update:updataModeVal'])
const updataModeVal = () => {
   emit('update:updataModeVal', props.modelValue + 100000)
}
</script>

多个传值

父组件

//  html
<modelValue v-model:pageNo="pageNo" v-model:pageSize="pageSize" />
// js
<script setup lang="ts">
import modelValue from './modelValue.vue';
import { ref } from 'vue';
const pageNo = ref(1);
const pageSize = ref(10);
</script>

子组件

// html
 <el-button @click="emit('update:pageNo', pageNo + 1)">pageNo</el-button>
 <el-button @click="emit('update:pageSize', pageSize * 2)">pageSize</el-button>
 // js
 <script setup lang="ts">
    const props = defineProps(['pageNo', 'pageSize'])
    const emit = defineEmits(['update:pageNo', 'update:pageSize'])
  </script>

q群 306671879 一起努力 冲冲冲！！！