vue-------实例的属性

mac2022-06-30 25

vue api强化学习之-------实例的属性

vue组件在构建的过程中，vue构建器给每个vue实例添加的属性对象。

常用vue实例属性

vm.$refs

vue在构建过程中，将注册过ref的所有dom元素和组件实例添加到一个对象中，并将此对象添加到当前vue实例的$refs属性下。 $refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs

vm.$parent

当前vue实例若有父实例，则将父实例对象保存到当前实例的$parent属性上。

vm.$data

Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问，所谓代理，简单理解，就是把data中的每一个数据在vue实例对象中逐个保存一份

vm.$props

当前组件接受到的props参数，vue实例代理了此对象，代理原理同$data

vm.$el

获取vue实例使用的根dom元素，即当前组件中template模板包含的根dom元素

vm.$options

用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用处：

new Vue({ customOption: 'foo', created: function () { console.log(this.$options.customOption) // => 'foo' } }) vm.$slots

用来访问被插槽分发的内容，根据具名插槽的名称即可拿到被分发到此插槽的内容，没有被命名的插槽，默认default,所有被分发的内容都被分发到default名下；

vm.$children

一个当前组件实例的直接子组件实例的数组，

vm.$root

当前组件树的根 Vue 实例,通常就是我们的总入口组件实例。如果当前实例没有父实例，此实例将会是其自己,

vm.$listeners

类型：{ [key: string]: Function | Array } 父作用域中(不包括.native修饰符修饰的)v-on事件监听器，是一种组件之间通信的方式，通常使用v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用;

vm.$attrs

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用

vm.$scopedSlots

用来访问作用域插槽。对于包括默认 slot 在内的每一个插槽，该对象都包含一个返回相应 VNode 的函数。vm.$scopedSlots 在使用渲染函数开发一个组件时特别有用

vm.$isServer

当前 Vue 实例是否运行于服务器

实例属性使用示例

父组件 instanceAttr.vue <template> <div class="instance"> <div>vue实例属性api介绍</div> <div ref="divref">{{val}}</div> <login ref="loginref" :pra="val" @myevent="methods1" :val="val" :age="age" :job="job" > <div slot="loginslot">我是被插槽分发的东西</div> </login> <button @click="clickMethod">获取$refs属性</button> </div> </template> <script> import login from '../components/login.vue' import index from '../components/index.vue' export default { name: 'InstanceAttr', data(){ return { val:666, age:25, job:"java" } }, // customOptions:{val:888}, 此处无用 components:{ index, login }, methods:{ clickMethod(){ // 获取dom元素的html内容 var htmlcontent = this.$refs.divref.innerHTML; //获取vue实例中的方法或数据 var vueinstanceMethorData = this.$refs.loginref.login() console.log(htmlcontent,".........this.$refs,............",vueinstanceMethorData); }, methods1(){alert('instanceAttr中的方法methods1被调用了')}, methods2(){} }, mounted(){ // 获取 vue实例监听的数据对象，由于vue实例代理了此对象，因此，在组件中直接通过this.xx，就可访问到data对象中的属性 console.log(this.$data.val,"......this.$data.val......"); // 获取当前组件的根元素 console.log(this.$el,"...instanceAttr组件中....获取根实例"); // 如上定义的数据获取不到 console.log(this.$options,'..获取初始化项....instanceAttr组件中....'); // 当前实例中没有分发到此处的内容，因此获取不到内容 console.log(this.$slots,"............instanceAttr组件。。。。。。this.$slots"); //获取当前组件实例的直接子组件实例对象，此处返回的是login组件实例 console.log(this.$children[0].name,"......this.$children....."); // 获取当前组件树的根vue实例此应用中就是app.vue对应的组件实例 console.log(this.$root,"......this.$root......instanceAttr组件中...."); // 此父作用域中没有注册事件监听器，因此此处没有监听器函数 console.log(this.$listeners,".this.$listeners.........instanceAttr组件中.."); // 此父作用域中没有属性绑定传递，因此此处获取不到 console.log(this.$attrs,"this.$attrs............instanceAttr组件中......"); // 没有查到内容被分派到此组件，因此获取不到 console.log(this.$scopedSlots,"this.$scopedSlots............instanceAttr组件中......"); //判断当前实例是否运行与服务器端，此处返回false, console.log(this.$isServer,".this.$isServer..................instanceAttr组件中.......") } } </script>  <style scoped> .divlistener{ width: 100px; height: 50px; background: green; border: 1px solid red; } </style> instanceAttr的子组件login.vue <template> <div class="login base"> <div> 我是login 组件 </div> <slot name="loginslot"></slot>  <index v-on="$listeners" v-bind="$attrs"/> </div> </template> <script> import index from './index.vue' export default { name: 'login', components:{ index }, props:{ // 接受pra，并定义接受规则 pra:{ type:Number, default:'' }, age:'' }, data(){ return { name:'lgx', } }, methods:{ login(){ console.log(this.name,"登录了................."); // 子组件中由于没有ref注册过，因此$refs对象为空对象 console.log(this.$refs,"......子组件中.this.$refs...."); // 获取父实例对象 console.log(this.$parent,"....子组件中父实例..此处应该是instanceAttr组件..........."); // 获取当前组件接受到的props参数 console.log(this.$props.pra,"....this.$props.........") } }, mounted(){ // 获取当前组件的根元素，并获取根元素的属性和类名 console.log(this.$el.attributes,"...login组件中....获取根实例",this.$el.classList); // 此处能够获取到父组件被分发到此处的虚拟dom节点对象，此处可以获取到分发到的内容，同时还可获取到其上下文 console.log(this.$slots.loginslot[0].elm,"............login组件。。。。。。this.$slots"); // 获取当前组件树的根vue实例此应用中就是app.vue对应的组件实例 console.log(this.$root,"......this.$root......login组件中...."); // 父作用域注册了myevent事件,因此此处能拿到此事件监听器函数 console.log(this.$listeners,".this.$listeners.........login组件中.."); // 当前组件接受了pra,age两个参数，其余的都会被$attrs属性获取到 console.log(this.$attrs,"this.$attrs............login组件中......"); //输出 {val: 666,job: "java"} "this.$attrs............login组件中......" // this.$scopedSlots对象对应每个插槽返回一个函数，每个函数返回一个相应的虚拟dom节点 console.log(this.$scopedSlots.loginslot(),"this.$scopedSlots............login组件中......."); } } </script>  <style scoped> .hello div { background: green; width: 200px; height: 100px; } </style> login的子组件index.vue <template> <div class="hello"> <div v-color="'red'"> 我是index 组件 </div>  <slot name="index"></slot> </div> </template> <script> export default { name: 'index', directives:{ color:function(el,binding){ el.style.color = binding.value } }, mounted(){ // console.log("index组件。。。。。。。。mounted.......组件被挂载到dom之后"); // this.data.push('111');//报错 console.log(this.$listeners,"..............this.$listeners.......index组件中"); // 当前组件接受了pra,age两个参数，其余的都会被$attrs属性获取到 console.log(this.$attrs,"this.$attrs............index组件中......"); }, } </script>  <style scoped> .hello div { background: green; width: 200px; height: 100px; } </style>

最新回复(0)