Vue教程(ref和$refs的使用) |
您所在的位置：网站首页 › send是形容词还是动词 › Vue教程(ref和$refs的使用) |
Vue教程(ref和$refs的使用)
|
在Vue中一般很少会用到直接操作DOM，但不可避免有时候需要用到，这时我们可以通过ref和$refs这两个来实现，本文我们就来详细的介绍下这个内容 refref 被用来给元素或子组件注册引用信息， 引用信息将会注册在父组件的 $refs 对象上，如果是在普通的DOM元素上使用，引用指向的就是 DOM 元素，如果是在子组件上，引用就指向组件的实例。 $refs$refs 是一个对象，持有已注册过 ref 的所有的子组件。 具体演示1.基础代码先来准备案例基础代码，如下 Document var vm = new Vue({ el: "#app", data: {}, methods: {} }) 2.普通DOM2.1 普通方式我们先通过 getElementById 方法来获取  在这里插入图片描述效果  在这里插入图片描述2.2 ref使用接下来我们通过 ref 属性来试试。  在这里插入图片描述然后查看 vm 实例对象  在这里插入图片描述通过上面的演示我们发现 在vm实例上有一个 $refs属性，而且该属性就有我们通过ref注册的DOM对象，于是我们可以这样获取DOM对象  在这里插入图片描述效果  在这里插入图片描述3.组件ref 也可以作用在组件中，我们来看下效果 3.1 添加组件先来添加一个自定义的组件  在这里插入图片描述 在这里插入图片描述 在这里插入图片描述效果  在这里插入图片描述3.2 ref 使用在 子组件中使用 ref属性，会将子组件添加到父组件的$refs对象中，如下  在这里插入图片描述查看vm对象  在这里插入图片描述通过 vm 实例查看 发现 $refs中绑定的有 我们的login组件，而且还看到了对应的 组件中的 msg属性和 show方法，那这样我们可以调用了，如下  在这里插入图片描述 在这里插入图片描述完整代码 Document 我是一个h3 var login = { template: "我是login子组件", data(){ return { msg: "ok" } }, methods:{ show(){ console.log("show方法执行了...") } } } var vm = new Vue({ el: "#app", data: {}, methods: { getElement(){ // 通过 getElementById 方式获取 DOM 对象 // console.log(document.getElementById("myh3").innerHTML) // console.log(this.$refs.myh3.innerHTML) console.log(this.$refs.mylogin.msg) this.$refs.mylogin.show() } }, components:{ login } }) |
【本文地址】
今日新闻 |
推荐新闻 |