vue中refs属性和router路由

最新推荐文章于 2024-08-17 21:17:28 发布

lipeiwen1998

最新推荐文章于 2024-08-17 21:17:28 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/lipeiwen1998/article/details/108159531

版权

本文介绍了Vue中$refs属性的使用，通过在HTML元素上添加ref属性并在JS中通过vm.$refs访问。接着讲解了vue-router的基本概念，包括route、routes和router，阐述了它们如何协同工作来实现页面内容的正确对应。还展示了在Vue中配置路由的步骤，包括定义path和component，以及如何在HTML模板和JS中设置。最后提到了Vue的watch监听功能，用于观察数据变动并执行回调。

摘要由CSDN通过智能技术生成

Vue 中 $refs 的使用

vm.$refs 一个对象，持有已注册过 ref 的所有子组件（或HTML元素）
在 HTML元素中，添加ref属性，然后在JS中通过vm.$refs.属性来获取

添加ref属性

<div id="app">
    <h1 ref="h1Ele">这是H1</h1>
    <hello ref="ho"></hello>
    <button @click="getref">获取H1元素</button>
</div>

获取注册过 ref 的所有组件或元素

methods: {
   
    getref() {
   
       // 表示从 $refs对象 中, 获取 ref 属性值为: h1ele DOM元素或组件
        console.log(this.$refs.h1Ele.innerText);
        this.$refs.h1ele.style.color = 'red';// 修改html样式
        console.log(this.$refs.ho.msg);// 获取组件数据
        console.log(this.$refs.ho.test);// 获取组件的方法
    }
}

vue-router 基本使用

路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。

点击之后，怎么做到正确的对应，比如，我点击home 按钮ÿ