vue组件传值编写代码并运行
时间: 2024-05-30 21:09:24 浏览: 60
好的,关于 vue 组件传值,我们可以通过 props 和 emit 实现。首先在父组件中定义一个变量并传入子组件中,子组件可以通过 props 接收这个变量。然后在子组件中,通过 emit 方法来触发一个事件并传回数据,父组件可以通过监听这个事件来获取子组件传回的值。
以下是一个简单的示例代码:
// 父组件
<template>
<div>
<child-component :message="msg" @onMsgChange="handleMsgChange"></child-component>
<p>子组件传回的消息:{{ childMsg }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: { ChildComponent },
data() {
return {
msg: 'hello'
childMsg: ''
}
},
methods: {
handleMsgChange(msg) {
this.childMsg = msg
}
}
}
</script>
// 子组件
<template>
<div>
<input type="text" v-model="inputMsg" @input="emitMsg">
</div>
</template>
<script>
export default {
props: ['message'],
data() {
return {
inputMsg: ''
}
},
methods: {
emitMsg() {
this.$emit('onMsgChange', this.inputMsg)
}
}
}
</script>
您可以将以上代码复制到 .vue 文件中并运行,来查看这个组件传值的实现。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)