<!--
* @Author: your name
* @Date: 2021-04-15 16:37:34
* @LastEditTime: 2021-04-18 14:11:39
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \fission\Vue3demo\index.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.7/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
console.log(Vue)
// console.log(Vue.createAp().mount('#app'))
//作用域插槽
const app = Vue.createApp({
provide(){
return {
honsrt:'3234'
}
},
data() {
return {
isClick: 'Dajia'
}
},
mounted() {
// },3000)
},
methods: {
handleAsyncComponents() {
},
chandleClick() {
this.isClick = this.isClick == 'Dajia' ? 'liuying' : 'Dajia'
}
},
template: `
<div @click="handleAsyncComponents">
同步
<Children/>
<AsyncCompoents/>
</div>
`
})
app.component('AsyncCompoents', Vue.defineAsyncComponent(() => {
return new Promise((resole, reject) => {
setTimeout(() => {
resole({
inject:['honsrt'],
template: `Asnys组件{{honsrt}}`
})
}, 3000)
})
}))
app.component('Children', {
inject:['honsrt'],
data() {
return {
list: ['1', '2', '3']
}
},
template: `
{{honsrt}}
`
})
app.component('Dajia', {
template: `<h1>A</h1>`
})
app.component('liuying', {
template: `<h1>B</h1>`
})
app.mount('#app')
</script>
</body>
</html>
32
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
