Vue动态组件和异步组件

文章目录

  • Vue动态组件和异步组件
  • 一、动态组件
  • 二、异步组件
  • 总结


Vue动态组件和异步组件

动态组件和异步组件的简单使用


一、动态组件

使用标签
Vue提供的动态组件的标签component
会根据:is="nxShow"中的nxShow的值自己寻找组件,
即省略了写方法的那步

在使用时,一般结合标签,让标签切换后留有缓存
自己写的例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态组件</title>
</head>
<body>
    <div id="app">

    </div>
    <script src="js/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data(){
                return{
                    msg:'动态组件如下(v-show的方法展示)',
                    nxShow:'nx-btn'
                }
            },
            methods:{
                change(){
                    this.nxShow = this.nxShow==='nx-btn'?'nx-input':'nx-btn';
                },
                btnFun(item){
                    this.msg = item;
                }
            },
            template:`
                

这里换了个写法,把内容不放在上面了div里了,放在template里,作用是一样的

{{msg}}

-------------

Vue提供的动态组件的标签component 会根据:is="nxShow"中的nxShow的值自己寻找组件, 即省略了写方法的那步

但是这样组件不会缓存,切换后内容消失得使用keep-alive标签,才能有缓存

-------------

`
}); /*这里复习一下全局组件的写法:1、创建实例;2、注册组件;3、挂在实例*/ app.component('nxBtn',{ methods: { btnClick(){ /*这里复习了子传父的方法,实现了子组件修改父组件中的内容*/ this.$emit('btnClick','你点击了子组件'); } }, template: ` ` }); app.component('nxInput',{ template:` ` }); app.mount("#app"); </script> </body> </html>

运行演示:
(分割线上是v-show实现,分割线下是vue标签实现


        
 

Vue动态组件和异步组件_第1张图片
点击切换显示
Vue动态组件和异步组件_第2张图片
输入后的内容,在组件切换后会保留缓存内容
Vue动态组件和异步组件_第3张图片

二、异步组件

使用这个来写Vue.defineAsyncComponent(()=>{})

Vue.defineAsyncComponent()=>{
           return new Promise((resolve, reject)=>{
           })
         }

代码如下(示例):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步组件</title>
</head>
<body>
    <div id="app">
        <async-items></async-items>
    </div>
    <script src="js/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data(){
                return{
                    msg:'基础模板'
                }
            }
        });
        /*
        *注册一个全局异步组件
        *使用Vue.defineAsyncComponent()=>{
        *   return new Promise((resolve, reject)=>{
        *   })
        * }
        * 来写
        *
        * Promise((resolve,reject)=>{})解决js中多个异步回调难以维护和控制问题
        * setTimeout(()=>{},3000)让前面的内容延时3秒再运行
        * */
        app.component('async-items',Vue.defineAsyncComponent(()=>{
            return new Promise((resolve, reject)=>{
                setTimeout(()=>{
                    resolve({
                        template:`
                            
从服务端请求的异步组件
`
}) },3000) }) })); app.mount("#app"); </script> </body> </html>

运行效果:
Vue动态组件和异步组件_第4张图片
三秒后
Vue动态组件和异步组件_第5张图片


总结

整理了,自己学习vue时,对动态组件和异步组件的总结

你可能感兴趣的:(前端,vue.js,javascript,前端)