利用ref进行dom操作

React中基本不需要直接操作DOM,但是有时候我们却不得不这么做,这个时候ref便出场了。ref有两种用法:

1.通过函数进行绑定
html:
<input type="text" ref={(name)=>{this.name=name;}}
js:
let name=this.name.value;

ref绑定的方法参数就是这个dom,将这个dom绑定到组件实例的自定义的属性上

2.直接绑定到ref上
html:
<textarea ref='comment'></textarea>
js:
let comment=this.refs.comment.value;

注意两种方式绑定和调用时候的区别
不推荐用ref,能不用就不要用ref

### Vue2 中使用 `ref` 获取 DOM 元素的方法 在 Vue2 中,可以通过 `ref` 属性为某个 DOM 元素或子组件绑定一个引用名称。当组件渲染完成后,可以在 JavaScript 中通过 `$refs` 对象访问这些被标记的元素。 以下是具体的实现方法和示例代码: #### 绑定 `ref` 并访问 DOM 元素 在模板中给目标 DOM 元素设置 `ref="someName"` 属性,在脚本部分可通过 `this.$refs.someName` 访问该 DOM 节点[^1]。 ```html <template> <div> <!-- 设置 ref 属性 --> <h1 ref="heading">这是一个标题</h1> <button @click="changeText">修改标题文字</button> </div> </template> <script> export default { methods: { changeText() { // 使用 this.$refs 获取到指定的 DOM 元素并操作其属性 this.$refs.heading.innerHTML = '新的标题内容'; } } }; </script> ``` 上述代码展示了如何利用 `ref` 和 `$refs` 动态更改页面上的 HTML 文字[^2]。 #### 注意事项 - **生命周期限制**:只有在组件挂载完成之后才能安全地访问 `$refs` 的内容。因此通常会在 `mounted` 钩子函数或者事件回调中执行相关逻辑。 - 如果尝试过早调用可能会导致未定义错误,因为此时 DOM 尚未完全加载完毕[^3]。 #### 结合实例说明 如果需要更复杂的场景比如列表项中的单个节点更新,则可以如下处理: ```html <template> <ul> <li v-for="(item, index) in items" :key="index" :ref="'listItem' + index"> {{ item }} </li> </ul> <button @click="updateSpecificListItem(2)">更新第三个列表项</button> </template> <script> export default { data() { return { items: ['苹果', '香蕉', '橙子'] }; }, methods: { updateSpecificListItem(index) { const specificElement = this.$refs['listItem' + index][0]; if (specificElement) { specificElement.textContent = '已替换为新值'; } } } }; </script> ``` 此例子演示了动态生成多个带有独立 `ref` 值的列表项目,并允许单独定位其中一个进行修改的操作过程。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值