1.父组件
<template>
<div class="home" @click="clik1">
{{ $store.state.aaa }}
</div>
<about :data=name @clickFu = receive></about>
</template>
<script lang="ts">
import { defineComponent ,ref} from 'vue';
import about from './About.vue'
import { useStore } from 'vuex'
export default defineComponent({
name: 'Home',
components: {
about
},
setup(){
const store = useStore();
const name = ref('小叶')
function clik1(){
store.commit('add',10)
}
function receive(e: any){
console.log(e)
}
return{
clik1,
name,
receive
}
}
});
</script>
2.子组件
<template>
<div class="home" @click="clickSon">
{{data}}
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'About',
components: {
},
props:['data'],
setup(props,context){
console.log(props.data)//可以拿到父组件的数据
function clickSon(){
context.emit('clickFu','11111')
}
return{
clickSon
}
}
});
</script>
