Vue实例属性

Vue实例属性

1. $props:使用这个属性可以接受上级组件向下传递的数据
2. $options:获取vue实例属性，包含自定义属性
3. $el:vue实例的根doom元素
4. $children:获得vue实例的直接子组件
5. $root:用获取当前组件树的根vue实例
6. $attrs:可以获取组件的属性，但其获取的属性中不包含class、style以及被声明为props的属性。

1.$props

首先做一个小案例：

		<div id="app">
		    <p>vm.$props <small>接收上级组件向下传递的数据</small></p>
		    <my-component :txt="msg" name="aaa"></my-component>
		</div>
		<script>
			Vue.component("my-component",{
   
				template:`<p @click="fun">传过来的数据：{
    {txt}}</p>`,
				props:["txt","name"],
				methods:{
   
					fun(){
   
						console.log(this.$props);
					}
				}
			});
			let vm=new Vue({
   
				el:"#app",
				data:{
   
					msg:"我是要传过去的数据"
				}
			});
		</script>

当点击穿过来的数据时$props显示的是：

2.$options

Vue实例初始化时，除了传入指定的属性外，还可以传入自定义属性。自定义的属性可以是数组、对象、函数等，通过Vm.$options来获取。
案例：

实现代码：

		<div id="app">
			<p>$options <small>获取vue实例属性，包含自定义属性</small></p>
			<button type="button" @click="show">查看</button>
			{