<template>
<demo msg="你好啊" @hello="handleHello">
<template v-slot:hahaha>
<span>哈哈哈</span>
</template>
</demo>
</template>
<script>
import Demo from "./components/Demo.vue"
export default {
name: 'App',
components: {
Demo
},
setup() {
function handleHello(value) {
console.log(value);
}
return {
handleHello
}
}
}
</script>
<template>
<div>{{person.name}}</div>
<div>{{person.sex}}</div>
<div>{{person.hobby}}</div>
<button @click="test">点我</button>
<br>
<slot name="hahaha"></slot>
</template>
<script>
import {reactive} from 'vue'
export default {
name: 'Demo',
props: ['msg'],
emits: ['hello'],
setup(props, context) {
console.log(props);
console.log(context.attrs);
console.log(context.slots);
let person = reactive({
name: 'may',
sex: '女'
})
function test() {
context.emit('hello','888')
}
return {
person,
test
}
}
}
</script>