ref 的巧妙使用 ---关于在vue中操作dom的问题2

博客指出使用Vue时一般不操作DOM,但某些情况需操作。介绍了用ref绑定div,通过this.$refs获取所有引用的方法。还提出使用自定义子组件时的问题,并以计时器小例子讲述实现过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我们虽然使用vue的时候是不会去操作它的dom的。但是有些情况下我们也不得不这么做, 那么我们应该如何处理这种情况呢? 我们使用 ref 去绑定到 div中,之后我们 通过 this.$refs (获取到 vue中 所有的引用) 但是如果我们是使用 自定义的子组件又该如何解决问题呢? 下面是一个 计时器的小例子讲述了实现的具体过程:

html:
<div id="app">
        <counter ref="one" @change="handleChange"></counter>
        <counter ref="two" @change="handleChange"></counter>
        <div>{{total}}</div>
</div>

JS:
Vue.component('counter',{
            // error  temlpate
            template: '<div @click="handleClick">{{number}}</div>',
            // 注意点 子组件中的 data 的是函数还是对象
            data: function() {
                //number: 0  data functions should return an object:
                return {
                    number: 0
                }
            },
            methods: {
                handleClick: function() {
                    this.number ++
                    // 涉及到子组件 向父组件 传值的内容
                    // 你的子组件发生变化之后会触发 change事件,那我们在哪里实时监听呢?

                    this.$emit('change')
                },
            }
        })

        var vm = new Vue({
            el: "#app",
            data: {
                total: 0
            },
            methods: {
                handleChange: function() {
                // console.log('change');
                // 这里我们用 ref 实际上是获取到了 counter组件的引用
                // 此时我们拿到了 所需要的数字那么我们之后该怎么做呢?
                console.log(this.$refs.one.number);
                console.log(this.$refs.two.number);

                this.total = this.$refs.one.number + this.$refs.two.number
                }
            }
            
        })

转载于:https://my.oschina.net/u/3520255/blog/3025339

### Vue使用类名子项选择器的方法 在 Vue.js 中,可以通过 `ref` 和 `$refs` 来实现对 DOM 元素或子组件的直接访问。如果需要基于类名来选择某个子项,则可以结合原生 JavaScriptDOM API 或者 Vue 提供的相关工具完成操作。 #### 方法一:通过 `querySelector` 获取指定类名的子项 Vue 并不直接提供针对类名的选择器功能,但可以在挂载后的生命周期钩子函数(如 `mounted`)中使用原生 DOM 操作方法 `document.querySelector` 或 `this.$el.querySelector` 定位目标元素[^1]。 以下是具体示例: ```javascript <template> <div class="parent"> <div class="child">Child Element</div> </div> </template> <script> export default { mounted() { // 使用 this.$el.querySelector 查找 .child 类名下的第一个匹配项 const childElement = this.$el.querySelector('.child'); console.log(childElement); // 输出找到的目标 DOM 节点 } }; </script> ``` 此方式适用于简单的场景下查找单个或多个具有相同类名的子节点,并对其进行进一步处理。 --- #### 方法二:借助 `v-for` 动态生成并绑定唯一标识符 当存在一组动态渲染的列表时,可为每项分配唯一的 `key` 值并通过事件传递该索引来定位具体的子项[^3]。 例如,在按钮点击后更改某一项的内容: ```html <template> <ul> <li v-for="(item, index) in items" :key="index" :class="{ active: item.active }"> {{ item.text }} <button @click="toggleActive(index)">Toggle Active</button> </li> </ul> </template> <script> export default { data() { return { items: [ { text: 'Item 1', active: false }, { text: 'Item 2', active: true }, { text: 'Item 3', active: false } ] }; }, methods: { toggleActive(index) { this.items[index].active = !this.items[index].active; } } }; </script> <style scoped> .active { color: red; } </style> ``` 上述代码展示了如何通过索引控制数组内的对象状态变化,从而间接实现了“选择”的效果。 --- #### 方法三:利用 CSS Selectors 配合 Refs 实现更精确的操作 虽然无法单纯依赖于类名作为选择依据,但是可以将两者结合起来——即先定义好对应的 HTML 结构及其样式类别;再分别给定各部分设置独立的 `ref` 属性以便后续调用。 如下所示: ```html <template> <div> <!-- 给不同层级添加不同的 ref --> <section ref="firstSection" class="main-section"> <article ref="nestedArticle" class="content-article"></article> </section> <button @click="logRefs()">Log Elements</button> </div> </template> <script> export default { methods: { logRefs() { console.log(this.$refs.firstSection); // 打印 section 元素 console.log(this.$refs.nestedArticle); // 打印 article 元素 // 如果想获取特定类别的所有成员也可以这样做: const allArticles = document.querySelectorAll('.content-article'); console.log(allArticles); } } }; </script> ``` 这种方法既保留了灵活性又兼顾到了性能优化方面的需求。 --- ### 总结 综上所述,尽管 Vue 自身并未内置专门用于按类名选取后代节点的功能模块,不过凭借其强大的生态系统以及与其他技术栈无缝衔接的能力,我们依然能够轻松达成目的。无论是采用标准浏览器API还是巧妙运用框架特性都可以很好地解决问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值