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

vue学习

news 2025/7/13 7:53:43

props

在 Vue.js 中，props 是用于从父组件向子组件传递数据的一种方式。它们是子组件的自定义属性，允许父组件将数据传递给子组件。props 是单向数据流的一部分，确保数据从父组件流向子组件，而不会反向流动。

1. props 的含义

含义：props 是子组件接收来自父组件的数据的方式。
用途：用于父子组件之间的数据传递，确保子组件能够访问父组件提供的数据。

2. 如何定义和使用 `props`

定义 `props`

在子组件中，可以通过 props 选项定义需要接收的属性。props 可以是一个数组或一个对象。

数组形式：
```
props: ['title', 'content']
```

对象形式（推荐）：

props: {
  title: {
    type: String,
    required: true
  },
  content: {
    type: String,
    default: 'Default content'
  }
}

类型检查

props 支持多种类型，包括 String、Number、Boolean、Array、Object、Function 等。通过指定类型，可以确保传入的数据类型正确。

默认值

可以为 props 提供默认值，如果父组件没有传递该 prop，子组件将使用默认值。

验证

可以为 props 提供验证函数，确保传入的数据符合预期。

3. 如何传递 `props`

在父组件中，可以通过子组件的标签属性传递数据。

<template>
  <div>
    <ChildComponent :title="pageTitle" :content="pageContent" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageTitle: 'Hello Vue!',
      pageContent: 'This is a Vue.js application.'
    };
  }
};
</script>

在子组件中，可以接收这些 props：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    content: {
      type: String,
      default: 'Default content'
    }
  }
};
</script>

4. `props` 的特点

单向数据流：props 是从父组件到子组件的单向数据流，子组件不能直接修改 props。
响应式：props 是响应式的，当父组件的数据发生变化时，子组件的 props 会自动更新。
验证：可以通过 props 的验证功能确保传入的数据符合预期。

5. 生命周期中的 `props`

beforeCreate：props 还未初始化，无法访问。
created：props 已经初始化，可以访问。
beforeMount：props 可以访问，模板编译时会使用 props 的值。
mounted：props 可以访问，DOM 挂载时会使用 props 的值。
数据更新：父组件的数据变化会触发子组件的 props 更新，子组件的视图会自动更新。
beforeDestroy：props 仍然可以访问，但组件即将销毁。
destroyed：组件销毁后，props 不再可用。

6. 示例

假设有一个父组件和一个子组件，父组件向子组件传递数据：

父组件：

<template>
  <div>
    <ChildComponent :title="pageTitle" :content="pageContent" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      pageTitle: 'Hello Vue!',
      pageContent: 'This is a Vue.js application.'
    };
  }
};
</script>

子组件：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    content: {
      type: String,
      default: 'Default content'
    }
  }
};
</script>

总结

props 是 Vue.js 中用于父子组件通信的重要机制。通过 props，父组件可以将数据传递给子组件，子组件可以通过定义 props 来接收这些数据。props 是响应式的，当父组件的数据发生变化时，子组件的 props 会自动更新。

vue文件中函数的加载时机

让我们详细说明 data、computed 和 methods 在 Vue 组件的生命周期中的初始化过程，以及它们在每个生命周期钩子中的状态。

1. beforeCreate

含义：实例初始化。
详细说明：
- 在这个阶段，Vue 实例刚刚被创建，但 data 和 methods 还未初始化。
- data 和 methods 还未绑定到实例上，因此无法访问这些属性。
- 通常用于日志记录或初始化一些非响应式数据。

示例：

beforeCreate() {
  console.log('beforeCreate: Component is being initialized');
  console.log(this.firstName); // undefined
  console.log(this.fullName); // undefined
  console.log(this.fetchData); // undefined
}

2. created

含义：实例创建完成，数据和方法可用。
详细说明：
- 在这个阶段，data 和 methods 已经初始化完成，可以访问这些属性。
- 计算属性（computed）也已经初始化，但模板尚未编译。
- 通常用于初始化数据、调用 API 获取数据、设置事件监听器等。

示例：

data() {
  return {
    firstName: 'John',
    lastName: 'Doe',
    ticketCardInfo: {}
  };
},
computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
},
methods: {
  fetchData() {
    // 假设从 API 获取数据
    this.ticketCardInfo = { deptTime: '10:00', trainCode: 'G123' };
  }
},
created() {
  console.log('created: Component has been created');
  console.log(this.firstName); // John
  console.log(this.fullName); // John Doe
  this.fetchData();
}

3. beforeMount

含义：模板编译完成，但尚未挂载到 DOM。
详细说明：
- 在这个阶段，模板已经编译完成，但尚未挂载到 DOM 上。
- 可以访问 data 和 methods，但 DOM 还未可用。
- 通常用于在挂载前进行一些操作，例如设置初始状态。

示例：

beforeMount() {
  console.log('beforeMount: Template has been compiled');
  console.log(this.ticketCardInfo); // { deptTime: '10:00', trainCode: 'G123' }
}

4. mounted

含义：组件挂载完成，DOM 可用。
详细说明：
- 在这个阶段，组件已经挂载到 DOM 上，可以访问和操作 DOM 元素。
- 通常用于操作 DOM、设置事件监听器、调用外部库等。

示例：

mounted() {
  console.log('mounted: Component has been mounted');
  console.log(this.$el); // 可以访问 DOM 元素
  this.setupEventListeners();
}

methods: {
  setupEventListeners() {
    // 设置事件监听器
  }
}

5. 数据更新

含义：用户交互导致数据变化，watch 和 computed 响应变化。
详细说明：
- 当 data 中的数据发生变化时，Vue 会自动更新视图。
- watch 侦听器会响应数据变化，执行特定的逻辑。
- computed 计算属性会基于依赖的数据动态计算。

示例：

data() {
  return {
    firstName: 'John',
    lastName: 'Doe'
  };
},
computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
},
watch: {
  firstName(newVal, oldVal) {
    console.log(`firstName changed from ${oldVal} to ${newVal}`);
  }
}

6. beforeDestroy

含义：组件销毁前，清理资源。
详细说明：
- 在这个阶段，组件即将被销毁，但实例仍然可用。
- 通常用于清理定时器、事件监听器、取消 API 请求等，避免内存泄漏。

示例：

beforeDestroy() {
  console.log('beforeDestroy: Component is about to be destroyed');
  this.cleanupEventListeners();
}

methods: {
  cleanupEventListeners() {
    // 清理事件监听器
  }
}

7. destroyed

含义：组件销毁完成。
详细说明：
- 在这个阶段，组件实例已经完全销毁，不再可用。
- 通常用于日志记录。

示例：

destroyed() {
  console.log('destroyed: Component has been destroyed');
}

初始化过程总结

beforeCreate：
- data 和 methods 还未初始化，无法访问。
- computed 也未初始化。
created：
- data 和 methods 初始化完成，可以访问。
- computed 初始化完成，但模板尚未编译。
beforeMount：
- 模板编译完成，但尚未挂载到 DOM。
- 可以访问 data、methods 和 computed。
mounted：
- 组件挂载完成，DOM 可用。
- 可以访问 data、methods 和 computed，并操作 DOM。
数据更新：
- data 中的数据变化会触发 watch 和 computed 的响应。
- 视图会自动更新。
beforeDestroy：
- 组件即将销毁，但实例仍然可用。
- 可以访问 data、methods 和 computed，但应清理资源。
destroyed：
- 组件实例已经完全销毁，不再可用。