- 父组件传值子组件
<template>
<div class='home'>
父组件
<!--:popContent为传递子组件内的key，popContent为data数据：value-->
<pop :popContent='popContent'></pop>
</div>
</template>
<script>
import pop from './pop.vue'; //引入组件或js
export default {
components: {
pop
},
data: {
return: {
popContent: '我是pop组件'
}
}
}
</script>
<template>
<div class='pop'>
子组件
{{popContent}}
</div>
</template>
<script>
export default {
props: ['popContent']
}
</script>
- 子组件传值父组件
<template>
<div class='home'>
父组件
<!-num是子组件传出来的值->
{{num}}
<!-@numberinc监听numberinc，子组件变化父组件执行num方法->
<pop @numberinc='num'></pop>
</div>
</template>
<script>
import pop from './pop.vue'; //引入组件或js
export default {
components: {
pop
},
methods: {
num(e) {
this.num = e
}
}
}
</script>
<template>
<div class='pop'>
子组件
<button type='button' @click='click'>按钮</button>
</div>
</template>
<script>
export default {
methods: {
click() {
this.$emit('numberinc', '1')
// numberinc是在父组件on监听的方法,第二个参数是需要传的值
}
}
}
</script>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
