标签：refs 关于 组件 world property ref hello

一般来说，在使用Vue框架的时候就尽量不要去使用 document.getElementByXxx() 直接操作DOM元素，如果确实要使用的话可以使用Vue提供的API ref ，用于代替 document.getElementByXxx()

# ref

ref 被用来给元素或子组件注册引用信息。

引用信息将会注册在父组件的 $refs 对象上。

如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例（VueComponent）。

# $refs

一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例。

实机演示

Html

# App.vue

<div id="app">
    <h1 ref='ref_h1'>Welcome to Your Vue.js App</h1>
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld ref='ref_hello_world' msg="componentMsg"/>
</div>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  mounted(){
    console.log('ref_h1 :>> ', this.$refs.ref_h1);
    console.log('ref_hello_world :>> ', this.$refs.ref_hello_world);
    console.log('ref_hello_world.property :>> ', this.$refs.ref_hello_world.property);
    console.log('ref_hello_world.$props.msg :>> ', this.$refs.ref_hello_world.$props.msg);
  }
}
</script>

# HelloWorld.vue

<div class="hello">
    <h1>{{ '组件中props：'+msg }}{{' 组件中property：'+property}}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
</div>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      property: 'value',
    };
  },
}
</script>

运行截图

本文参考：

Vue官网-ref

Vue官网-$refs

标签：refs,关于,组件,world,property,ref,hello
来源： https://www.cnblogs.com/66-RAKU/p/15952664.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。