本文介绍了Vue中不包含模板解析器的情况如何使用render函数，以及refs在获取DOM元素和组件实例中的应用。通过示例代码展示了如何通过refs获取button标签和子组件Person。同时，提到了vueinspect>output.js可用于查看Vue关键配置。掌握这些对于理解Vue组件传值至关重要。
vue包含完整版核心文件+模板解析器。而我们引入的是不包含模板解析器的vue。所以不能使用template,而是用render。只有在vm中配置，平时的页面中不需要用render。
vue 一些关键配置项，在控制台输入：vue inspect > output.js 就可以看到。包括app.vue,index.html等等的配置。
ref用于html标签时可以简单认为是给标签打上了id,是vue获取DOM元素时用到的一种手段，代码如下：
<button @click="showDOM" ref = "msg"> 点击拿到元素 <button/>
methods{
showDOM(){
console.log(this.@refs.msg)
}
}
那么点击按钮就可以获取button标签
如果作用于组件上，则可以拿到组件。假设父组件App.vue中含有子组件Person.vue。
<Person ref="per"/>
<button @click="showDOM" "> 点击拿到元素 <button/>
methods{
showDOM(){
console.log(this.@refs.per)
}
}
则可以拿到子组件Person.如果是id获取的则是template下的div
这对于之后学习组件传值也是很有帮助的。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
