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

【vue2】组件写法

news 2025/5/14 21:06:09

组件基本骨架

<template><div class="my-component"><!-- 组件的 HTML 结构 --><h1>{{ title }}</h1><!-- 事件绑定 --><button @click="handleClick">点击我</button><!-- 输入框与双向数据绑定 --><input v-model="inputValue" placeholder="请输入内容" /><!-- 列表渲染 --><ul><li v-for="(item, index) in items" :key="index">{{ item }}</li></ul></div>
</template><script>
export default {name: 'MyComponent', // 组件的名称props: {initialTitle: {type: String,default: '默认标题'}},data() {return {title: this.initialTitle, // 通过 props 初始化的数据inputValue: '', // 绑定输入框的值items: ['Item 1', 'Item 2', 'Item 3'] // 列表数据};},methods: {handleClick() {alert('按钮被点击了！');this.title = '标题已更新'; // 更新 title}}
};
</script><style scoped>
/* 样式作用域只在当前组件生效 */
.my-component {padding: 20px;background-color: #f9f9f9;
}.my-component h1 {color: #333;
}.my-component button {padding: 10px 20px;background-color: #42b983;color: white;border: none;border-radius: 5px;cursor: pointer;
}.my-component button:hover {background-color: #38a169;
}
</style>

props（组件的输入参数）:父调用输入的参数
name ：组件名称设置为 MyComponent，可以通过 name 来识别和复用
data（组件的内部状态）:定义数据，把父调用的赋值

父组件调用

<template><div><!-- 传递 props --><MyComponent initialTitle="初始标题"></MyComponent></div>
</template><script>
import MyComponent from './MyComponent.vue';export default {components: {MyComponent}
};
</script>