ref获取元素或组件

最新推荐文章于 2024-05-20 10:46:49 发布

this-way

最新推荐文章于 2024-05-20 10:46:49 发布

阅读量617

点赞数

分类专栏：框架类文章标签： vue vue.js

本文链接：https://blog.csdn.net/Un_YUI/article/details/113569129

版权

框架类专栏收录该内容

10 篇文章 0 订阅

订阅专栏

ref获取组件和内部dom

<body>
	父组件
  <div id="app" ref="oneself">
    <!-- 如果给子组件加上ref，那么在父组件中使用$refs获取 -->
    <!-- 得到的就是整个子组件，用为加在子组件标签上的这个ref属于父组件的东西 -->
    <login ref="fu"></login>
  </div>
  子组件的模板
  <template id="sun">
    <div>
      <h1 ref="h1">子组件</h1>
      <p ref="p">neirong</p>
    </div>
  </template>
</body>

<script src="./vue.js"></script>
<script>
	实例
  const v = new Vue({
    el: "#app",
    data: {
      msg: "111"
    },
    // 子组件
    components: {
      login: {
        template: `#sun`,
        data(){
          return {
            aaa: "子组件data"
          }
        },
        mounted(){
          //获取到的是子组件自己的dom获取它内部的子组件
          console.log(this.$refs)
        }
      }
    },

    mounted(){
      //获取到的是父组件中带有ref的数据（子组件，自己的dom ==..）
      console.log(this.$refs)
    }
  })
  // 注意操作的是dom
</script>

this-way

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ref获取元素或组件

ref获取组件和内部dom<body> 父组件 <div id="app" ref="oneself">   <login ref="fu"></login> </div> 子组件的模板 <template id="
复制链接

扫一扫

专栏目录