vue--ref、provide、inject 的使用
1. 概述
首因效应告诉我们：
在日常交往中，第一印象是非常重要的，好的第一印象能让我们在与人相处时事半功倍。
但也从另一面告诉我们，不能仅凭第一印象去判断一个人，有时虚假的第一印象，也有可能蒙蔽我们的双眼，影响我们的判断，正所谓“路遥知马力，日久见人心”。
言归正传，今天我们来聊聊 VUE 中 ref、provide、inject 的使用。
2. ref、provide、inject
2.1 使用 ref 获取 dom 元素
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({
mounted() {
console.info(this.$refs.div1)
this.$refs.div1.innerHTML = 'hello';
},
template:`
<div>
<div ref="div1">
</div>
</div>
`
});
const vm = app.mount("#myDiv");
</script>
在 VUE 中，获取 dom 元素就是这么简单，在想获取的 dom 元素上增加属性 ref="标识名称"，然后在方法中使用 this.$refs.标识名称 ，即可获取该 dom 元素
注意：使用 this.$ref.标识名称 获取 dom 元素时，必须是在 dom 元素渲染完成后，也就是说，必须是在 mounted 周期方法中获取 或是 元素渲染完成后，使用触发方法获取
2.2 使用 ref 获取子组件
const app = Vue.createApp({
mounted() {
this.$refs.myCom.method1();
},
template:`
<div>
<my-com ref="myCom" />
</div>
`
});
app.component("my-com", {
methods : {
method1 () {
alert("hello");
}
},
template: `
<div>
component1
</div>
`
});
ref 的另一个功能，就是获取子组件对象
该例中主组件使用子组件时使用 <my-com ref="myCom" /> 的写法，给组件添加了 标识名称 myCom，
然后在方法中使用 this.$refs.myCom.method1(); 得到子组件对象，并调用了子组件中的方法。
2.3 多组件参数传递
如果有一个参数，需要从父组件传递到子组件，然后子组件再传递给子子组件，根据我们之前学的知识，可以这么写
const app = Vue.createApp({
data(){
return {
num : 1
}
},
template:`
<div>
<my-com-1 :num="num" />
</div>
`
});
app.component("my-com-1", {
props:["num"],
template: `
<my-com-2 :num="num" />
`
});
app.component("my-com-2", {
props:["num"],
template: `
<div>
{{num}}
</div>
`
});
这样写的确可以实现，但似乎不太优雅，所有的子组件都需要接收参数，并再往下传递，这里有一个更好的写法
2.4 多组件参数传递优化
const app = Vue.createApp({
data(){
return {
num : 1
}
},
provide() {
return {
num_2 : this.num
}
},
template:`
<div>
<my-com-1 />
</div>
`
});
app.component("my-com-1", {
template: `
<my-com-2 />
`
});
app.component("my-com-2", {
inject:["num_2"],
template: `
<div>
{{num_2}}
</div>
`
});
这样写就优雅多了，只需要在父组件使用 provide 传参，在需要使用数据的子组件，使用 inject 接收即可
注意：使用 provide 、inject 的方式传参，当父组件的 num 发生改变时，页面不会重新渲染，至于如何重新渲染，在后面的文章中会有介绍。
————————————————
版权声明：本文为CSDN博主「追风人聊Java」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u011181989/article/details/122911932
