- 父组件传值子组件
<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>