1. 父
组件向子
组件传值：
在父
组件中使用子
组件时，可以通过在子
组件标签中使用属性绑定的方式将数据传递给子
组件。例如：
```html
<template>
<div>
<child-component :prop-name="parentData"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.
vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentData: '这是来自父
组件的数据'
};
}
};
</script>
```
在子
组件中，可以通过 `props` 来接收父
组件传递过来的数据。例如：
```html
<template>
<div>{{ propName }}</div>
</template>
<script>
export default {
props: {
propName: {
type: String,
required: true
}
}
};
</script>
```
2. 子
组件向父
组件传值：
在子
组件中，可以通过 `$emit` 方法触发自定义事件，并将数据传递给父
组件。例如：
```html
<template>
<div>
<button @click="sendDataToParent">向父
组件传递数据</button>
</div>
</template>
<script>
export default {
methods: {
sendDataToParent() {
this.$emit('custom-event', '这是来自子
组件的数据');
}
}
};
</script>
```
在父
组件中，可以通过在子
组件标签中监听自定义事件的方式接收子
组件传递过来的数据。例如：
```html
<template>
<div>
<child-component @custom-event="receiveDataFromChild"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.
vue';
export default {
components: {
ChildComponent
},
methods: {
receiveDataFromChild(data) {
console.log(data); // 输出：这是来自子
组件的数据
}
}
};
</script>
```
3. 父子
组件互相传值：
可以将以上两种方式结合起来，实现父子
组件互相传值。例如：
```html
<template>
<div>
<child-component :prop-name="parentData" @custom-event="receiveDataFromChild"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.
vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentData: '这是来自父
组件的数据'
};
},
methods: {
receiveDataFromChild(data) {
console.log(data); // 输出：这是来自子
组件的数据
}
}
};
</script>
```
子
组件：
```html
<template>
<div>
<button @click="sendDataToParent">向父
组件传递数据</button>
</div>
</template>
<script>
export default {
props: {
propName: {
type: String,
required: true
}
},
methods: {
sendDataToParent() {
this.$emit('custom-event', '这是来自子
组件的数据');
}
}
};
</script>
```
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
