Premièrement, le but
vueNeutraliser les problèmes gênants provideafin injectde les résoudre .跨层级传递属性
Deuxièmement, le composant parent
providedans le composant ancêtre 注入.
<template>
<div>
<p>AT</p>
<TestDemo></TestDemo>
</div>
</template>
<script>
import TestDemo from "./TestDemo.vue";
export default {
name: "AT",
components: {
TestDemo },
provide() {
return {
aT: this,
parent: "AT",
};
},
data() {
return {
};
},
methods: {
test() {
console.log("AT");
},
},
};
</script>
3. Sous-composants
inject Introduisez où il doit être utilisé.
<template>
<div>
parent: {
{ parent }}
<br />
<a @click="aT.test">click</a>
</div>
</template>
<script>
export default {
name: "TestDemo",
inject: ["aT", "parent"],
data() {
return {
};
},
};
</script>