我的需求
有些时候,我们需要获取组件的DOM元素
有些小伙伴会说,这还不简单
直接使用this.$ref.xx不就可以了吗
我们来看一下,是不是我们想的那样简单
组件内容
<template>
<div class="demo">
<h2>我是组件</h2>
<div>我是组件中的数据</div>
</div>
</template>
使用组件的页面
<template>
<div>
我是页面测试一
<testcom ref="testRef"></testcom>
</div>
</template>
<script>
import testcom from "../components/test-com.vue"
export default {
components:{
testcom:testcom
},mounted(){
console.log('获取组件内的DOM',this.$refs.testRef);
}
}
</script>
现在的实际结果
我想在这个页面内,获取组件内的DOM元素
也就是获取
<div>
我是页面测试一
<testcom ref="testRef"></testcom>
</div>
实际上压根获取的就是这样的
我们并没有获取到组件内的DOM元素。
而是获取的是Vue的组件
那要怎么样才可以获取组件内的元素呢
解决办法使用$el
<template>
<div>
我是页面测试一
<testcom ref="testRef"></testcom>
</div>
</template>
<script>
import testcom from "../components/test-com.vue"
export default {
components:{
testcom:testcom
},this.$refs.testRef.$el);
}
}
</script>
需求描述
有些时候我们需要封装组件
封装组件的时候,
我们需要属性直接设置在某一个指定的元素上。
<template>
<div>
我是测试页面
<testcom type="text"></testcom>
<testcom type="password"></testcom>
</div>
</template>
组件
<template>
<div class="demo">
<input name="" id="">
</div>
</template>
实际结果
属性结果直接被添加到跟元素上去了。
因为这个是vue规定的
我们如何让属性设置在指定的元素上面呢?
我们可以使用inheritAttrs
解决办法inheritAttrs的使用
<template>
<div class="demo">
//动态绑定到需要的元素上
<input v-bind="$attrs" name="" id="">
</div>
</template>
<script>
export default {
//表示不添加在组件的根元素上
inheritAttrs:false
}
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。