2、ref 加在子组件上，用this.$refs.name 获取到的是 组件实例，可以使用组件的所有方法 。
3、如何利用 v-for 和 ref 获取一组数组或者dom 节点
注意：
1、 ref 需要在dom渲染完成后才会有 ，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用 ，或者 在 this.$nextTick(()=>{}) 中调用 。
2、如果ref 是通过v-for 循环出来的， 有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了。
<div id="ref-outside-component" v-on:click="consoleRef">
<component-father ref="outsideComponentRef" ></component-father>
<p>ref在外面的组件上</p>
</div>
var refoutsidecomponentTem={
template:"<div class='childComp'><h5>我是子组件</h5></div>"
}
var refoutsidecomponent=new Vue({
el:"#ref-outside-component",
components:{
"component-father":refoutsidecomponentTem
},
methods:{
consoleRef:function () {
console.log(this) // #ref-outside-component vue实例
console.log(this.$refs.outsideComponentRef) // div.childComp vue实例，组件实例
}
}
})
<div id="ref-outside-dom" v-on:click="consoleRef" >
<component-father></component-father>
<p ref="outsideDomRef" >ref在外面的元素上</p>
</div>
var refoutsidedomTem={
template:"<div class='childComp'><h5>我是子组件</h5></div>"
}
var refoutsidedom=new Vue({
el:"#ref-outside-dom",
components:{
"component-father":refoutsidedomTem
},
methods:{
consoleRef:function () {
console.log(this) // #ref-outside-dom vue实例
console.log(this.$refs.outsideDomRef) // <p>标签dom元素 ref在外面的元素上</p>
}
}
})
<div id="ref-inside-dom">
<component-father></component-father>
<p>ref在里面的元素上</p>
</div>
var refinsidedomTem={
template:"<div class='childComp' v-on:click='consoleRef'>" +
"<h5 ref='insideDomRef' >我是子组件</h5>" +
"</div>",
methods:{
consoleRef:function () {
console.log(this) // div.childComp vue实例
console.log(this.$refs.insideDomRef) // <h5 >我是子组件</h5>
}
}
}
var refinsidedom=new Vue({
el:"#ref-inside-dom",
components :{
"component-father":refinsidedomTem
}
})
<div id="ref-inside-dom-all">
<ref-inside-dom-quanjv></ref-inside-dom-quanjv>
</div>
Vue.component ("ref-inside-dom-quanjv",{
template:"<div class='insideFather'>" +
"<input type='text' ref='insideDomRefAll' v-on:input='showinsideDomRef'>" +
" <p>ref在里面的元素上--全局注册 </p>" +
"</div>",
methods:{
showinsideDomRef:function () {
console.log(this)//这里的this其实还是div.insideFather
console.log(this.$refs.insideDomRefAll) // <input type="text">
}
}
})
var refinsidedomall=new Vue({
el:"#ref-inside-dom-all"
})
转自:https://www.cnblogs.com/goloving/p/9404099.html
React17 中对 Ref 的正确使用方式有哪些？
绑定 Ref 的方式
注意：上面的所有方式，如果是给组件传 ref 属性，则需要对此组件进行 Refs 转发至具体的 HTML 元素。
回调 Refs 用于组件时
因常规函数和 class 组件不接收ref参数，且 props 中也不存在ref 。因此回调 Refs 仅用于 HTML DOM 元素，如果给组件传函数 Refs 应通过 props 透传。
例如下面的方式：
回调 Refs 的参数
回调函数方式的执行时机为：
https://zh-hans.reactjs.org/docs/forwarding-refs.html
https://zh-hans.reactjs.org/docs/refs-and-the-dom.html
搜索《考试竞技》微信小程序
<img>标签的 src 属性的值是：图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。
<link>标签的 rel 属性规定：当前文档与被链接文档之间的关系。
举例说明：
html文件：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>练习使用HTML</title>
<!--
rel="stylesheet"表示调用的是一种样式。
href="css/index.css" 表示外部样式文件的路径
-->
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<h1>我的第一个标题</h1>
<p>内容</p>
<!--图像文件的 URL-->
<img src="img/book.png" />
</body>
</html>
css文件：
h1{color: red
background-color: greenyellow
}
效果展示：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）