当前位置：首页 > news >正文

Vue.js组件开发

news 2025/7/12 17:41:10

Vue.js 是一个流行的 JavaScript 框架，用于构建用户界面和单页应用程序。开发 Vue.js 组件是 Vue.js 开发的核心部分。下面是一些关于 Vue.js 组件开发的基本概念和示例。

1. 创建一个基本的 Vue 组件


<template><div><h1>{{ title }}</h1><button @click="incrementCounter">Click me</button><p>Counter: {{ counter }}</p></div>
</template><script>
export default {data() {return {title: 'Hello Vue.js',counter: 0};},methods: {incrementCounter() {this.counter++;}}
};
</script><style scoped>
h1 {color: blue;
}
button {margin-top: 10px;
}
</style>

2. 组件的 Props

Props 是父组件向子组件传递数据的机制。


<template><div><h2>{{ message }}</h2></div>
</template><script>
export default {props: {message: {type: String,required: true}}
};
</script>

3. 事件和自定义事件

子组件可以通过 $emit 方法向父组件发送事件。


<template><button @click="notifyParent">Notify Parent</button>
</template><script>
export default {methods: {notifyParent() {this.$emit('custom-event', 'Hello from child');}}
};
</script>

4. 插槽（Slots）

插槽允许你在父组件中插入内容到子组件中。


<template><div><slot></slot></div>
</template>

使用插槽的父组件示例：


<template><CustomComponent><p>This is some content passed to the slot!</p></CustomComponent>
</template>

5. 计算属性（Computed Properties）

计算属性是基于它们的依赖进行缓存的属性。


<template><div><p>Original: {{ message }}</p><p>Uppercase: {{ uppercaseMessage }}</p></div>
</template><script>
export default {data() {return {message: 'Hello Vue!'};},computed: {uppercaseMessage() {return this.message.toUpperCase();}}
};
</script>

6. 生命周期钩子

Vue 组件有一系列生命周期钩子，可以在特定时刻执行代码。


<script>
export default {mounted() {console.log('Component is mounted!');},destroyed() {console.log('Component is destroyed!');}
};
</script>

7. 组合式 API

在 Vue 3 中，组合式 API 提供了一种更灵活的方式来组织和复用逻辑。


<template><div><h1>{{ title }}</h1><button @click="increment">Increment</button><p>Count: {{ count }}</p></div>
</template><script>
import { ref } from 'vue';export default {setup() {const title = ref('Hello Vue 3');const count = ref(0);const increment = () => {count.value++;};return {title,count,increment};}
};
</script>