1,父到子 props
父组件
<template>
<h1>我是父组件传参</h1>
<navItem :ref="(el) => (navFnEL = el)" :list="list" @send="getInfo"></navItem>
</template>
子组件
<script>
import { onMounted, reactive } from "vue";
export default {
props: {
list: {
type: Array,
default: () => {
return [];
},
},
},
setup(props, context) {
const list = reactive(props.list);
console.log("title", list);
const toFather = () => {
context.emit("send", 666);
};
const init = (e) => {
console.log("父组件主动调用子组件", e);
};
onMounted(()=>{
console.log("9999999999999")
})
return {
list,
toFather,
init
};
},
};
</script>
解析
父组件 在子组件标签上使用 v-bind:list="list"
子组件使用props接收 list
然后在setup 里使用 props.list 拿到数据
2.子到父 context.emit()
子组件
context.emit("send", 666);
父组件
<navItem :ref="(el) => (navFnEL = el)" :list="list" @send="getInfo"></navItem>
let getInfo = (e) => {
console.log("获取数据", e);
};
使用ref
父组件
<navItem :ref="(el) => (navFnEL = el)" :list="list" @send="getInfo"></navItem>
setup(props, context) {
const navFnEL = ref();
onMounted(() => {
console.log("fnGetEl", fnGetEl.value);//子组件暴露的数据
console.log("navFn", navFnEL);
});
return {
navFnEL
};
};
},
子组件
setup(props, context) {
const list = reactive(props.list);
onMounted(()=>{
console.log("9999999999999")
})
return {
list //父组件通过ref能够访问到的数据
};
},
注意了
1,绑定ref时需要这样使用
:ref="(el) => (navFnEL = el)"
对应 const navFnEL = ref(); navFnEL 能够拿到 所有的子组件返回的内容
并且需要return 返回 navFnEL
使用getCurrentInstance获取到父级的实例 调用父级的方法修改数据
子
import { getCurrentInstance} from "vue";
const ctx = getCurrentInstance()
ctx.parent.setupState.getInfo(999999999)
父
let getInfo = (e) => {
console.log("获取数据", e);
};
v-model 组件交互
父
<navItem v-model:showFlag="show"></navItem>
子
export default {
props: {
showFlag:{
type:Boolean,
default:false
},
modelValue:string
},
emits:['update:modelValue']
setup(props, context) {
let computedText = computed(()=>{
get(){
return props.modelValue
},
set(value){
context.emit("update:modelValue",value)
}
})
const toFather = () => {
context.emit("update:showFlag",false)
};
onMounted(()=>{
ctx.parent.setupState.getInfo(999999999)
})
return {
toFather
};
},
};
使用插件 mitt 实现兄弟组件的交互通信
安装 mitt插件
npm install mitt -s
定义 mitt.js文件
import mitt from 'mitt';
const emitter = mitt();
export default emitter;
兄弟组件A
import emitter from "@/utils/mitt.js"
//发射事件
emitter.$emit("sendInfo",1)
兄弟组件B
import emitter from "@/utils/mitt.js"
//接收事件
emitter.$on("sendInfo",(e)=>{
console.log(e)
})