1. key属性
- TODO：后面补充，这个需要结合diff算法原理进行说明
2. ref属性
定义：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
作用：简单说就是给子组件上绑定ref，则父组件就可以通过this.$ref.子组件绑定的ref的值获取到子组件的实例
this.$ref结构：默认是空对象，当在子组件上绑定ref属性时，this.$refs的结构就变成{ 绑定的ref属性: 对应的子组件 }
注意点：ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用
2.1 通过ref直接访问dom元素
// 示例1：ref访问dom元素
<body>
<div id="app">
// 给p元素绑定ref属性，则父组件vm实例可以通过vm.$ref.pref引用到p元素进而操作p元素
<p ref="pref" attr="ppp">我是p元素</p>
<div>
{{ getElement() }}
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
methods: {
getElement() {
// this.$refs.pref指向p元素
// vm.$refs.pref.getAttribute('attr')可以获取到p元素上的attr属性值
return this.$refs.pref
}
}
})
</script>
</body>
2.2 通过ref直接访问子组件实例
组件不是DOM元素，是没有dom元素的自带属性的，比如没有OffsetTop等，无法通过 点 .OffsetTop来获取的。所以如果想操作自定义组件的dom相关属性，就需要通过$el来获取组件中的DOM元素 this.$refs.refxxx.$el.offsetTop
// 示例2：通过ref访问子组件实例
<div id="app">
<cpn ref="cpnRef"></cpn>
<button @click="getcpn">btn</button>
<p>{{ msg }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data() {
return {
msg: ''
}
},
components: {
cpn: {
template: '<div>我是cpn组件</div>',
data() {
return {
cpnMsg: "我是cpn组件的cpnMsg"
}
}
}
},
methods: {
getcpn() {
// this.$refs.cpnRef指向cpn组件实例；可以简单调用cpn组件的属性或者方法
// this.$refs.cpnRef.cpnMsg 获取到cpn子组件的属性值
this.msg = this.$refs.cpnRef.cpnMsg
}
}
})
</script>
3. is属性
- 给内置的component元素组件绑定is属性可以达到动态组件的效果
<body>
<div id='app'>
<div>
<!-- 注意 currentTab = tab是内联js语句，执行后currentTab发生变化触发currentTabComponent -->
<button v-for="tab in tabs" @click="currentTab = tab">
{{ tab }}
</button>
<!-- component为vue的内置组件和特殊属性is搭配起来表示
根据currentTabComponent的变化进而渲染成不同的组件，完全替换掉内置的component组件
-->
<component :is="currentTabComponent"></component>
</div>
</div>
<script>
Vue.component("home", {
template: "<div>Home component</div>"
});
Vue.component("posts", {
template: "<div>Posts component</div>"
});
new Vue({
el: "#app",
data: {
currentTab: "Home",
tabs: ["Home", "Posts"]
},
computed: {
currentTabComponent: function () {
return this.currentTab.toLowerCase();
}
}
});
</script>
</body>
