特殊的attribute
- key
- ref
- is
key
预期:Number|Stirng|Boolean|Symbol
主要用在Vue的虚拟DOM的diff算法
,对比新旧nodes来辨识Vnodes
不使用key
时,Vue会使用一种最大限度减少动态元素且尽可能的尝试就地修复/复用相同类型元素的算法
使用key
时,会基于key的变化重新排列
元素顺序,并且会移除key不存在的元素
常见与v-for
组合使用
v-for
单独使用时可以强制替换元素,变化的key值,虚拟DOM的diff算法会优先比较key,不存在则会整体替换,而不是部分的替换
<template>
<div id="app">
<input type="text" v-model="msg" />
<div :key="msg">{{ msg }}</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
msg: "hello",
};
},
};
</script>
2 ref
给元素或子组件注册引用信息
。
引用信息会注册在父组件的$refs
对象上
普通的DOM元素:该DOM元素
子组件:组件实例$refs
是非响应式的
<template>
<div id="app">
<span ref="span">{{ msg }}</span>
<Child ref="child" />
<button @click="showRefs()">获取refs</button>
</div>
</template>
<script>
import Child from "./components/Child.vue";
export default {
name: "App",
data() {
return {
msg: "hello",
};
},
components: {
Child,
},
methods: {
showRefs() {
console.log(this.$refs);
},
},
};
</script>
3 is
预期:String|Object
绑定需要渲染的动态组件
例如在详情页中,不确定使用哪一类型的组件,可以根据数据
来使用动态组件
数据文件
export default [
{
id: 1,
type: 'video'
},
{
id: 2,
type: 'text'
},
{
id: 3,
type: 'image'
},
{
id: 4,
type: 'text'
}
]
父组件
<template>
<div id="app">
<div v-for="item in newsCompType" :key="item.id">
<component :is="item.type"></component>
</div>
</div>
</template>
<script>
import newsData from "./news";
import newsImage from "./components/newsImage.vue";
import newsText from "./components/newsText.vue";
import newsVideo from "./components/newsVideo.vue";
export default {
name: "App",
data() {
return {
newsData,
};
},
computed: {
newsCompType() {
return this.newsData.map((item) => {
return {
...item,
type: "news-" + item.type,
};
});
},
},
components: {
newsImage,
newsText,
newsVideo,
},
};
</script>
component组件中的is的值时引入的子组件,通过计算属性遍历原数据,根据每条数据生成对应组件的type,这样就可以使用v-for
进行列表渲染
动态引入
如果组件子组件较多,并且并不是所有组件都用到,可以使用
动态引入
的方式components:{ newsImage:()=>import('./components/newsImage.vue') }
传值
在列表渲染时,可以将每条
数据
逐个绑定到对应组件上,相同类型的数据进行统一处理//父组件 <div v-for="item in newsCompType" :key="item.id"> <component :is="item.type" :newsItem="item"></component> </div> //子组件 props:['newsItem']
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。