vue--通过ref拿到dom元素和组件值

最新推荐文章于 2024-09-21 03:44:45 发布

春风霓裳

最新推荐文章于 2024-09-21 03:44:45 发布

阅读量1.9k

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43470725/article/details/122747717

版权

vue 专栏收录该内容

54 篇文章 2 订阅

订阅专栏

通过给html的标签家ref属性，然后在vue中就可一通过this.$refs.名字得到该dom或者组件值

案例：

Content组件：

<template>
  <h1>内容页</h1>
</template>

<script>
export default {
  name: "Content"
}
</script>

<!--scoped作用域 加了表示只在当前模板下-->
<style scoped>

</style>

App组件：

<template>
<div id="app">
<!--  这些都要在id="app"的里面，才会有下面的style-->
  <h1>Vue-Router</h1>
  <router-link to="/main">首页</router-link>
  <router-link to="/content">内容页</router-link>
  <router-link to="/kuang">李白</router-link>
  <!--  router-view就是要展示组件的地方-->
  <router-view></router-view>
  <!--  点击后会去找main.js,main.js配置了router，然后会去到router包下的index.js里面-->
<!--ref 和id一样可以拿到dom值-->
  <h1 v-text="msg" ref="title" id="title_id"></h1>
  <button @click="showDom">点我输出上方的DOM元素</button>
  <Content ref="comp"></Content>
</div>

</template>

<script>
import Content from "./components/Content";

export default {
  name: 'App',
  components: {Content},
  data(){
    return{
      msg: '欢迎学习vue!'
    }
  },
  methods: {
    showDom(){
      console.log(this)
      // ref 和id一样可以拿到dom值
      console.log(this.$refs.title)
      console.log(document.getElementById('title_id'))
      console.log(this.$refs.comp)
    }
  }

}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>