欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

零基础学习Vue: 第25课 Vue如何获取子组件属性：

程序员文章站 2022-04-24 09:47:41
...

零基础学习Vue: 第25课 获取属性Vue属性对象获取方法：

通过dom更新完成后的异步回调来实现精确获取子组件属性：
this.$nextTick(()=>{ }) //等dom更新完成后执行内部的回调函数

下面是实验代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ref获取节点</title>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">
  <!-- 引入子组件 并且设置标签节点获取名isson -->
  <son ref="isson">我是组件</son>
</div>

<!-- 设置子组件son标签 -->
<template id="son">
    <div>{{msg}}</div>
</template>

<script>
    //定义子组件son
    let son = {
      template:'#son',
      data(){
        return {
          msg:'我是子组件的数据'
        }
      },
      mounted(){
        this.msg = 'xxx';
        console.log('这是子组件内输出的msg改变后的值'+this.msg);  //确定
      }
    }

    let vm = new Vue({
        el:'#app',
        components:{	//在根组件内注册子组件son
            son
        },
        mounted(){  //mounted生命周期函数(数据以挂在到页面上时触发)
          console.log('第一种方法'+this.$refs.isson.$el.innerText) //第一种方法获取子主件的内容
         
          this.$nextTick(()=>{      //第二种方法获取子主件的内容
            console.log('第二种方法'+this.$refs.isson.$el.innerText) 
          })
        }
    })
</script>

</body>
</html>

运行结果如下：

零基础学习Vue: 第25课 Vue如何获取子组件属性：

回顾以下vue内对象属性的获取

  • vm.$set(对象，属性，初始值) //设置vm中某对象 内的属性 给设置值
  • this.$mount //获取Vue对象
  • this.$nextTick(回调函数) //等dom更新完成后执行回调
  • vm.$destroy() //销毁某Vue对象
  • vm.$data //外部获取Vue内的data的属性
  • this.$el //获取根节点

上一篇： Vuex 的简单应用

下一篇： 零基础学习Vue: 第30课 Vue子组件实现动态文章列表小案例：

推荐阅读