零基础学习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内对象属性的获取
- vm.$set(对象，属性，初始值) //设置vm中某对象 内的属性 给设置值
- this.$mount //获取Vue对象
- this.$nextTick(回调函数) //等dom更新完成后执行回调
- vm.$destroy() //销毁某Vue对象
- vm.$data //外部获取Vue内的data的属性
- this.$el //获取根节点