实例属性是指Vue实例对象的属性，如前面用过的vm.$data就是一个实例属性，它用来获取vm实例中的数据对象。
1.vm.$props
使用vm.$props属性可以接受上级组件向下传递的数据。
Vue
<div id="app">
<!-- 父组件 -->
<my-parent></my-parent>
</div>
<!-- 父组件模块 -->
<template id='parent'>
<div>
<h3>手机信息搜索</h3>
手机品牌：<input type="text" v-model = "brand">
<!-- 子组件 -->
<my-child v-bind:name= "brand"></my-child>
</div>
</template>
<!-- 子组件模板 -->
<template id ="child">
<ul>
<li>手机品牌：{{show.brand}}</li>
<li>手机型号：{{show.type}}</li>
<li>市场价格：{{show.price}}</li>
</ul>
</template>
<script>
Vue.component('my-parent',{
template:'#parent',
data(){
return{
brand:''
}
}
})
Vue.component('my-child',{
template:'#child',
data(){
return{
content:[
{brand:'华为',type:'Mate20',price:3699},
{brand:'苹果',type:'iphone7',price:2949},
{brand:'三星',type:'Galaxy s8+',price:3209},
{brand:'vivo',type:'Z5X',price:2031},
{brand:'一加',type:'OnePlus7',price:2989},
{brand:'360',type:' N7Pro',price:1099},
{brand:'oppo',type:'Reno',price:2599},
],
show:{brand:'',type:'',price:''}
}
},
props:['name'],
watch:{
name(){
if(this.name){
var found = false
this.content.forEach((value,index) => {
if(value.brand===this.name){
found=value
}
});
this.show = found?found:{brand:'',type:'',price:''}
}else{
return
}
}
}
})
var vm = new Vue({
el:'#app',
data:{}
})
</script>2.vm.$options
Vue实例初始化时，除了传入指定的选项外，还可以传入自定义选项。
自定义选项的值可以是数组、对象、函数等，通过vm.$options来获取。
Vue
<div id="app">
<div>{{Base}}</div>
<div>{{NoBase}}</div>
</div>
<script>
var vm = new Vue({
el:'#app',
customOptions:[13,4234,15325,2356,51],
data:{
Base:'我是基础数据'
},
created(){
this.NoBase = this.$options.customOptions
}
})
</script>3.vm.$el
vm.$el用来访问vm实例使用的根DOM元素
Vue
<div id="app">
<h1>我是根标签结构</h1>
</div>
<script>
var vm = new Vue({
el:'#app',
})
vm.$el.innerHTML = '<div>更换后的根标签结构div</div>'
</script>4.vm.$children
vm.$children用来获取当前实例的直接子组件。
需要注意的是，$chidren并不保证顺序，也不是响应式的。
Vue
<div id="app">
<button @click = 'child'>查看子组件</button>
<my-component></my-component>
</div>
<script>
Vue.component('my-component',{
template:'<div>mycomponent</div>'
})
var vm = new Vue({
el:'#app',
methods:{
child(){
console.log(this.$children)
}
}
})
</script>5.vm.$root
vm.$root用来获取当前组件树的根Vue实例，如果当前实例没有父实例，则获取到的是该实例本身。
Vue
<div id="app">
<my-component></my-component>
</div>
<script>
Vue.component('my-component',{
template:'<button @click = "root">查看根实例</button>',
methods:{
root(){
console.log(this.$root)
console.log(this.$root === vm.$root)
}
}
})
var vm = new Vue({
el:'#app'
})
</script>6.vm.$slots
Vue中的组件中使用template模板定义HTML结构，为了方便使用template公共模板结构，Vue提出了插 槽(Slots)的概念，插槽就是定义在组件内部的template模板，可以通过$Slots动态获取
Vue
<div id="app">
<my-component>
你好
</my-component>
</div>
<template id="first">
<div>
<!-- 插槽 -->
<slot></slot>
</div>
</template>
<script>
Vue.component('my-component',{
template:'#first'
})
var vm = new Vue({el:'#app'})
</script>7.vm.$attrs
vm.$attrs可以获取组件的属性，但其获取的属性中不包含class、style以及被声明为props的属性。
Vue
<div id="app">
<my-component id="fkxk"></my-component>
</div>
<script>
Vue.component('my-component',{
template:'<button @click = "show">查看属性</button>',
methods:{
show(){
console.log(this.$attrs)
}
}
})
var vm = new Vue({el:'#app'})
</script>