provide/inject用法
2020-01-19 本文已影响0人
零界梦忆
<html>
<head>
<title>V</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<Test></Test>
</div>
<script>
function LoadingPlugin() {
Vue.component('Test',{
template: "<div>{{message}}<Test2 /></div>",
provide() {
return {
elTest: this
};
},
data() {
return {
message: "message from Test"
};
},
methods: {
change(component1) {
this.message = "message from " + component1;
}
}
});
Vue.component("Test2", {
template: "<Test3 />"
});
Vue.component("Test3", {
template: '<button @click="changeMessage">change</button>',
inject: ['elTest'],
methods: {
changeMessage() {
this.elTest.change(this.$options._componentTag);
}
}
});
}
Vue.use(LoadingPlugin);
let vm = new Vue({
el: "#root"
});
</script>
</body>
</html>
