【vue2】组件写法

傻傻有内涵的我

于 2024-09-26 08:22:32 发布

阅读量326

点赞数 4

分类专栏： vue HTML学习 elementui 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_45852108/article/details/142543810

版权

vue 同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

HTML学习

7 篇文章 0 订阅

订阅专栏

elementui

4 篇文章 0 订阅

订阅专栏

组件基本骨架

<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>