vue3 组件之间传值的方法

1.[props]传值

父传值 非函数

子传父 函数

父传子     <child-dom :car="car" :getToy="handleClick" />

可以传变量过去，也可以传方法

父组件：

//父组件
<template>
  <div>
    <div>父组件的汽车：{{ car }}</div>
    <child-dom :car="car" :getToy="handleClick" />
    <div>儿子给的玩具:{{ toy }}</div>
  </div>
</template>
<script setup>
import ChildDom from "../child/index.vue";
import { ref } from "vue";
const car = ref("奔驰");
const toy = ref("");
function handleClick(val) {
  toy.value = val;
}
</script>

子组件

<template>
  <div>
    子组件的玩具:{{ toy }}
    <div>获取父组件的值:{{ car }}</div>
    <button @click="getToy(toy)">玩具给父亲</button>
  </div>
</template>
<script setup>
import { ref } from "vue";
defineProps(["car", "getToy"]);
const toy = ref("奥特曼");
</script>

父传子

    <child-dom :car="car" :getToy="handleClick" />

子传父

2.自定义事件

子传父

父组件

<template>
  <div>
    <div>父组件的汽车：{{ car }}</div>
    <child-dom :car="car" @set-toy="handleClick" />
    <div>儿子给的玩具:{{ toy }}</div>
  </div>
</template>
<script setup>
import ChildDom from "../child/index.vue";
import { ref } from "vue";
const car = ref("奔驰");
const toy = ref("");
//接受子组件的数据
function handleClick(val) {
  toy.value = val;
}
</script>

子组件：通过defineEmits()，emit('方法',值）

<template>
  <div>
    子组件的玩具:{{ toy }}
    <div>获取父组件的值:{{ car }}</div>
    <button @click="$emit('set-toy', car)">给父亲的玩具</button>
  <button @click="handelChange">送给父亲的玩具</button>
  </div>
</template>
<script setup>
import { ref } from "vue";
defineProps(["car"]);
const emit = defineEmits(["set-toy"]);
const toy = ref("奥特曼");
function handelChange() {
  emit("set-toy", toy.value);
}
</script>

3.mitt 插件方法

3.1先安装mitt

npm i mitt

3.2新建mitt引用文件 /utils/emitter/index.ts
 

import mitt from 'mitt'
const emitter = mitt();
// 绑定事件
emitter.on("abc", (value) => {
  console.log("abc事件被触发", value);
});
emitter.on("xyz", (value) => {
  console.log("xyz事件被触发", value);
});
setInterval(() => {
  // 触发事件
  emitter.emit("abc", 666);
  emitter.emit("xyz", 777);
}, 1000);
setTimeout(() => {
  // 清理事件
  emitter.all.clear();
}, 3000);
export default emitter;

3.3引用mitt

//ts
import emitter from "@/utils/emitter";
emitter.on('set-toy',(value)=>{
console.log('set-toy被触发',value)
})

3.4提供数据的组件，在合适的时候触发事件

import emitter from "@/utils/emitter";
function sendToy(){
  // 触发事件
  emitter.emit('send-toy',toy.value)
}

3.5组件销毁的时候，清理

import {onUnmounted} from 'vue'
onUnmounted(()=>{
  // 解绑事件
  emitter.off('send-toy')
})

4.v-model vue3.4之前

这个就相当于el-inpu这个组件

父组件

<template>
  name:{{ name }}
  <!-- <input type="text" :value="name" @input="handleinput" /> -->
  <PropsModelInput v-model="name" />
</template>
<script setup>
import { ref } from "vue";
import PropsModelInput from "../propsModelInput/index.vue";
let name = ref();
const handleinput = (e) => {
  console.log(e);
};
</script>

子组件 PropsModelInput/index.vue

<template>
  <input
    type="text"
    :value="props.modelValue"
    @input="emit('update:model-value', $event.target.value)"
  />
</template>
<script setup>
import { ref } from "vue";
 // 接收props
const prpps = defineProps(["modelValue"]);
//声明事件
let emit = defineEmits(["update:model-value"]);
</script>
<style>
input {
  height: 40px;
  background-color: #eee;
  border: 1px solid red;
}
</style>

5.v-model vue3.4之后defineModel()宏

详细见文档：vue.js v-model

简单使用：

//父组件
<template>
<child v-model="name"/>
</template>
<script setup>
import child from './child.vue'
import {ref} from 'vue'
const name = ref()
</script>

子组件 child.vue

<template>
  <input v-model="model" />
</template>
<script setup>
import { ref } from "vue";
const model = defineModel("title");
</script>

6.$attrs 祖传孙

祖组件

//祖组件
<template>
  <div class="parent">
    a:{{ a }}

    <propsChild :a="a" v-bind="{x:1,y:2}" :updateA="updateA" />
  </div>
  <h2>attrs父组件</h2>
</template>
<script setup>
import { ref } from "vue";
import propsChild from "@/components/propAttrsChild/index.vue";
const a = ref(1);
function updateA(value) {
  a.value = value;
}
</script>

父组件

//父组件
<template>
  <div>attrs子组件</div>
  <child v-bind="$attrs" />
</template>
<script setup>
import { ref } from "vue";
// console.log($attrs);
import child from "../propAttrsChild1/index.vue";
</script>

孙组件

<template>
  <div>attrs组件{{ a }}</div>
  <button @click="updateA(777)">点我更新</button>
</template>
<script setup>
import { ref } from "vue";
// console.log($attrs);
const props = defineProps(["a","x","y", "updateA"]);
console.log("props", props);
</script>

注：借鉴尚硅谷张天禹老师笔记