Vue3 内置属性
在 Vue.js 中，is、key 和 ref 是三个常用的内置属性，用法如下。
is 属性
在 Vue.js 中，is 属性通常用于动态组件的实现，特别是当你希望在运行时动态地切换不同的组件时非常有用。
- 类型: String 或 Object
- 作用:
is属性用于动态地指定当前<component>组件应该渲染哪一个子组件。通常结合<component>元素和动态组件的特性一起使用，允许你在运行时基于数据来切换不同的组件。
实例
<template>
<div>
<component :is="currentComponent"></component>
<button @click="toggleComponent">Toggle Component</button>
</div>
</template>
<script>
import FirstComponent from './FirstComponent.vue';
import SecondComponent from './SecondComponent.vue';
export default {
data() {
return {
currentComponent: 'FirstComponent'
};
},
components: {
FirstComponent,
SecondComponent
},
methods: {
toggleComponent() {
this.currentComponent = this.currentComponent === 'FirstComponent' ? 'SecondComponent' : 'FirstComponent';
}
}
};
</script>
<div>
<component :is="currentComponent"></component>
<button @click="toggleComponent">Toggle Component</button>
</div>
</template>
<script>
import FirstComponent from './FirstComponent.vue';
import SecondComponent from './SecondComponent.vue';
export default {
data() {
return {
currentComponent: 'FirstComponent'
};
},
components: {
FirstComponent,
SecondComponent
},
methods: {
toggleComponent() {
this.currentComponent = this.currentComponent === 'FirstComponent' ? 'SecondComponent' : 'FirstComponent';
}
}
};
</script>
以上代码中，currentComponent 是一个数据属性，它决定了 <component> 元素要渲染的具体组件。当点击按钮时，调用 toggleComponent 方法会切换 currentComponent 的值，从而动态改变渲染的组件。
注意事项：
- 注意事项:
is属性的值可以是组件的名称字符串，也可以是组件对象。- 当使用字符串时，组件名称应该与注册的组件名一致。
- 如果使用对象，可以直接引用组件对象或者使用动态计算属性返回组件对象。
key 属性
-
类型: String 或 Number
-
作用: 在 Vue.js 的列表渲染中，每个
v-for循环中的元素需要有一个唯一的key属性。key的作用是帮助 Vue 识别每个节点的唯一性，从而高效地更新虚拟 DOM。当 Vue 重新渲染列表时，会根据key来决定是否重新使用现有 DOM 元素或者重新创建。实例
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
以上代码中，
item.id作为key属性，确保了每个列表项在数据更新时可以正确地被 Vue 辨识和处理。 -
注意事项:
key应该是唯一且稳定的。稳定的意思是，key不应该随着数据的变化而变化，否则会影响 Vue 的性能和虚拟 DOM 的复用策略。- 避免使用索引作为
key，除非你明确知道列表项的顺序不会改变。
ref 属性
-
类型: String 或 Object
-
作用:
ref是用来给元素或子组件注册引用信息的。在实际开发中，你可以使用ref来访问具体的 DOM 元素或子组件实例，从而进行一些操作，如调用方法、访问属性等。
给 DOM 元素添加 ref
实例
<template>
<div>
<input type="text" ref="inputField">
</div>
</template>
<script>
export default {
mounted() {
console.log(this.$refs.inputField); // 访问 DOM 元素
this.$refs.inputField.focus(); // 调用 DOM 元素方法
}
}
</script>
<div>
<input type="text" ref="inputField">
</div>
</template>
<script>
export default {
mounted() {
console.log(this.$refs.inputField); // 访问 DOM 元素
this.$refs.inputField.focus(); // 调用 DOM 元素方法
}
}
</script>
给子组件添加 ref
实例
<template>
<div>
<child-component ref="childRef"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
mounted() {
console.log(this.$refs.childRef); // 访问子组件实例
this.$refs.childRef.doSomething(); // 调用子组件方法
}
}
</script>
<div>
<child-component ref="childRef"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
mounted() {
console.log(this.$refs.childRef); // 访问子组件实例
this.$refs.childRef.doSomething(); // 调用子组件方法
}
}
</script>
注意事项:
- 在模板中使用
ref时，Vue 将会提供一个对应的$refs对象，通过该对象可以访问到注册的 DOM 元素或子组件实例。 - 避免滥用
ref，尽可能通过数据驱动和事件处理来操作 DOM 和子组件，保持代码的可维护性和清晰性。