Vue3 传值方式

Vue3 传值方式
Vue3 传值方式
Vue3 传值方式

Props 方式

<template>
  <!-- 父组件-->
  <Bar :msg="'prop传值'"/>
</template>

<script setup>
  import Bar from './bar.vue'
</script>

------------------------------------
<template>
  <!-- 子组件 -->
  <h1>{{ msg }}</h1>

  <button type="button" @click="count++">
    fei 数量 {{ count }}
  </button>

</template>

<script setup>
  import { ref } from 'vue'
  defineProps({msg: String})
  const count = ref(0)
</script>

Emits 方式

<template>
  <!-- 父组件-->
  <Bar @add="handleFei"/>
</template>

<script setup>
  import Bar from './bar.vue'
  const handleFei = (value) => {
    console.log("接受参数:", value);
  }
</script>

------------------------------------
<template>
  <!-- 子组件 -->
  <button @click="feiClick">点击我触发emits</button>
</template>

<script setup>
  import { defineEmits  } from 'vue'
  const emits = defineEmits(['add'])
  const feiClick = () => {
    emits("add","我是参数,传给父组件")
  }
</script>

DefineExpose 父调子

<template>
  <!-- 父组件-->
  <button @click="feiClick" >点击我触发emits</button>
  <Bar ref="feiRef"/>
</template>

<script setup>
  import Bar from './bar.vue'
  import {ref} from "vue";
  const feiRef = ref(null);
  const feiClick = () => {
    // 调用子组件
    feiRef.value.childrenFei();
  }
</script>

------------------------------------
<template>
  <!-- 子组件 -->
</template>
<script setup>
 const childrenFei = () => {
   console.log("接受父组件方法");
 }
 // 暴露出去方法,让父组件调用
 defineExpose({
   childrenFei
 })
</script>

Provide/Inject隔代传递

<template>
  <!-- 父组件-->
  <Bar />
</template>

<script setup>
  import Bar from './bar.vue'
  import {provide} from "vue";
  provide('list',"可以隔代传给子组件")
</script>

------------------------------------
<template>
  <!-- 子组件 -->Provide/Inject
  <p>{{fei}}</p>
</template>
<script setup>
  import {inject} from "vue";
  const fei = inject("list")
</script>

Provide/Inject 官方链接

自定义组件上v-model

默认

<template>
  <!-- 父组件-->
  <p>  在 3.x 中，自定义组件上的 v-model 相当于传递了 modelValue prop 
      并接收抛出的 update:modelValue 事件：
  </p>
  <p>{{feiTitle}}</p>
  <Bar v-model="feiTitle"/>
</template>

<script setup>
  import Bar from './bar.vue'
  import {ref} from "vue";

  const feiTitle = ref({fei:"初始值"});
</script>

------------------------------------
<template>
  <p>子组件</p>
  <p>
    <button @click="upFei"> 点击更新父组件 v-model="pageTitle"</button>
  </p>
</template>
<script setup>
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {}
  },
})
const emits = defineEmits(['update:modelValue'])
const upFei = () => {
  emits('update:modelValue', {xx1: "值foo", xx2: "值bar"});
}
</script>

修改v-model参数

<template>
  <!-- 父组件-->
  <p>  在 3.x 中，自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件： </p>
  <p>{{feiTitle}}</p>
  <Bar v-model:title="feiTitle"/>
</template>

<script setup>
  import Bar from './bar.vue'
  import {ref} from "vue";

  const feiTitle = ref({fei:"初始值"});
</script>

------------------------------------
<template>
  <p>子组件</p>
  <p>
    <button @click="upFei"> 点击更新父组件 v-model="pageTitle"</button>
  </p>
</template>
<script setup>
const props = defineProps({
  title: {
    type: Object,
    default: () => {}
  },
})
const emits = defineEmits(['update:title'])
const upFei = () => {
  emits('update:title', {xx1: "值foo", xx2: "值bar"});
}
</script>

在element-plus坑

解决办法使用computed重新定义

----------父组件
<Bar v-model="visible"/>

------------子组件
<template>
  <el-dialog v-model="editVisible" :before-close="onClose">
    <div>
      aaaaaaaaaaa__ok_大飞
    </div>
  </el-dialog>
</template>

<script setup>
import {computed} from "vue";

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['update:modelValue'])

const editVisible = computed({ // 重新定义
  get: () => props.modelValue,
  set: (value) => emits("update:modelValue", value),
})

const onClose = () => {
  emits('update:modelValue', false)
}

</script>

Vue3中 v-model 官方链接