vue获取真实dom节点

最新推荐文章于 2024-08-21 20:54:58 发布

不管，我要跨世纪

最新推荐文章于 2024-08-21 20:54:58 发布

阅读量1.5k

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/gengtieguang/article/details/108601749

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

ref && refs

获取真实dom节点

1.命名
2.获取 this.$refs.ipt

Son 组件

<template>
    <div id="son">
        <h1>{{title}}</h1>
        <p>我的名字叫{{name}}</p>
        <input type="text" ref="inp"/>
        <button @click="changeNameFunc"> 改名字</button>
    </div>
</template>
<script>
export default {
  
    methods:{
        changeNameFunc(){
            this.$emit('agreeName',this.$refs.inp.value)
        }
    },
    props:['title','name','agreeName']
   
}
</script>

App组件

<template>
  <div id="app">
    <Son title="美食合集" :name="name" @agreeName="agreeName"/>
  </div>
</template>

<script>
import Son from './components/son'

export default {
  data(){
    return{
      name:"狗蛋"
    }
  },
  name: 'App',
  methods:{
    agreeName(name){
      this.name = name
    }
  },
  components: {
    Son
  }
}
</script>