在VUE3中,此案例的Demo.vue组件命名是不规范的,运行时会报错,此时需要关闭语法检查才能继续运行。组件名必须为多个单词
App.vue
<template>
<Demo @hello="showHelloMsg" msg="你好啊" school="尚硅谷">
<template v-slot:qwe>
<h3>测试数据1</h3>
</template>
<template v-slot:asd>
<h3>测试数据2</h3>
</template>
</Demo>
</template>
<script>
import Demo from './components/Demo'
export default {
name: 'App',
components: {
Demo
},
setup() {
function showHelloMsg(value, ...other) {
console.log('App收到了数据:', value, ...other)
}
return {
showHelloMsg
}
}
}
</script>
Demo.vue
<template>
<slot name="qwe">默认内容1</slot>
<slot name="asd">默认内容2</slot>
<button @click="test">测试触发一下Demo组件的hello事件</button>
</template>
<script>
export default {
name: 'Demo',
props: ['msg', 'school'],
emits: ['hello'],
setup(props, context) {
console.log('props:', props)
console.log('context:', context)
console.log('context.attrs:', context.attrs) // 相当与Vue2中的$attrs
console.log('context.emit:', context.emit) // 触发自定义事件的
console.log('context.slots:', context.slots) // 插槽
// 方法
function test() {
context.emit('hello', 123, 456, 789)
}
return {
test
}
}
}
</script>
结果: