在
Vue.js 中，组件之间可以通过 props 和事件实现
传值。以下是
传值的两种方式：
1. props
props 是一种用于从父组件向子组件传递数据的方式。在父组件中使用子组件时，可以通过 props 属性向子组件传递数据，例如：
```html
<!-- 父组件 -->
<template>
<div>
<child-component :message="message"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.
vue';
export default {
name: 'ParentComponent',
components: {
ChildComponent,
},
data() {
return {
message: 'Hello',
};
},
};
</script>
```
在子组件中，可以通过 props 属性接收父组件传递的数据，例如：
```html
<!-- 子组件 -->
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
name: 'ChildComponent',
props: {
message: String,
},
};
</script>
```
2. 事件
事件是一种用于从子组件向父组件传递数据的方式。在子组件中，可以通过 `$emit` 方法触发一个自定义事件，并传递数据，例如：
```html
<!-- 子组件 -->
<template>
<div>
<button @click="handleClick">Click me</button>
</div>
</template>
<script>
export default {
name: 'ChildComponent',
methods: {
handleClick() {
this.$emit('child-click', 'Hello');
},
},
};
</script>
```
在父组件中，可以通过 `v-on` 指令监听子组件触发的自定义事件，并处理传递的数据，例如：
```html
<!-- 父组件 -->
<template>
<div>
<child-component @child-click="handleChildClick"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.
vue';
export default {
name: 'ParentComponent',
components: {
ChildComponent,
},
methods: {
handleChildClick(message) {
console.log(message);
},
},
};
</script>
```
通过事件的方式可以让子组件与父组件解耦，更加灵活。在实际开发中，可以根据实际需求选择合适的方式传递数据。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
