这个方法传递子参数,可以让所有的子组件获取到,不能子组件传递给父组件
父组件
说下大概思路,导入privode,然后使用privode方法,有点像redis,key value形式存值,子组件可以通过key来获取你要传的值。你传过去是对象,那么它就是对象,如果你传过去的是数组,那么它就是数组,如果你传过去的是响应式对象,那么它就是响应式对象。这里有可能我理解有错,因为我就尝试传过去个对象或者一个响应式对象,我主要意思就是可以传响应式对象。
<template>
<Demo4Chiren2 @begin="handleCustomEvent" ref="demoChild" />
<button @click="callChildMethod">调用子组件方法</button>
<p>子组件数据: {{ childData }}</p>
<demo4-chiren>
<a href="#">插槽</a>
</demo4-chiren>
<VueFooter>
<template v-slot:url>
<a href="#">wang</a>
</template>
</VueFooter>
<!-- <div>-->
<!-- <el-button link type="primary" size="small" @click="handlePrint" id="printTable">-->
<!-- 打印-->
<!-- </el-button>-->
<!-- <el-button link type="primary" size="small" @click="print">-->
<!-- 返回-->
<!-- </el-button>-->
<!-- <el-table :data="tabledata" style="width: 100%">-->
<!-- <el-table-column fixed prop="date" label="Date" width="150" />-->
<!-- <el-table-column prop="name" label="Name" width="120" />-->
<!-- <el-table-column prop="state" label="State" width="120" />-->
<!-- <el-table-column prop="city" label="City" width="120" />-->
<!-- <el-table-column prop="address" label="Address" width="600" />-->
<!-- <el-table-column prop="zip" label="Zip" width="120" />-->
<!-- </el-table>-->
<!-- </div>-->
</template>
<script>
//provide 把父组件所有信息传递给所有子组件
import { defineComponent, ref ,provide } from 'vue';
import VueFooter from "./vueFooter.vue";
import Demo4Chiren2 from './Demo4Chiren2.vue';
import Demo4Chiren from "./demo4Chiren.vue";// 请根据实际路径调整
export default defineComponent({
components: {
VueFooter,
Demo4Chiren,
Demo4Chiren2
},
setup() {
const web = {
name:"zzzz",
url:"#"
};
// provide("provideWeb",web)
//provide 把父组件所有信息传递给所有子组件
provide("web",web);
const demoChild = ref(null);
const childData = ref('');
const handleCustomEvent = (data) => {
console.log('接收到子组件数据:', data);
// childData.value = data.message;
};
const callChildMethod = () => {
if (demoChild.value) {
console.log(demoChild.value.sayHi());
}
};
const handlePrint = ()=>{
}
return {
demoChild,
childData,
handleCustomEvent,
callChildMethod,
web
};
}
});
</script>
子组件
导入inject,然后inject方法去key,value取值即可
<template>
<div>{{ fullName }}</div>
<slot></slot>
<!-- <div>{{web.name}}</div>-->
</template>
<script>
//子组件通过inject获取父组件传下来的信息
import { ref, computed,inject} from 'vue';
export default {
setup() {
// 根据key去获取,根据父组件传过来是啥就是啥,如果是响应式数据,那么它就是响应式数据
const web = inject('web')
console.log("provideUser",web)
const firstName = ref('Jane');
const lastName = ref('Doe');
const fullName = computed(() => firstName.value + ' ' + lastName.value);
return { fullName,web };
}
}
</script>