脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue动态组件与内置组件

Vue动态组件与内置组件浅析讲解

 更新时间：2022年08月29日 10:23:42   作者：丘比特惩罚陆  
闲话少说，我们进入今天的小小五分钟学习时间，前面我们了解了vue的组件，我们本文主要是讲解vue的动态组件和内置组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

一、动态组件

在vue中，有很多的组件可以挂载同一个挂载点上面，要在同一个挂载的点上的多个组件之间可以实现动态的切换渲染，我们可以通过内置组件component的is属性动态的绑定组件，然后我们就可以根据is的值来决定哪一个组件要被渲染，非常的方便。

我们通过一点简单的实例代码可以加深了解：

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>组件之间的传递</title>
</head>
<body>
    <div id="app">
        <h1>小小闲置网</h1>
<input type="radio" name="tab" value="qiubite1" v-model="cfl">王者账号：
<img src="C:\Users\Administrator\Desktop\李宝\wangzhe.jpg" alt="" style="width: 30px;height:30px">
<input type="radio" name="tab" value="qiubite2" v-model="cfl">电话：
<input type="radio" name="tab" value="qiubite3" v-model="cfl">估价：
<component v-bind:is="cfl"></component>
</component>
    </div>
     <template id="n1">
        <div style="width: 200px;height: 200px;border: 2px solid rgb(100, 100, 196);">
            <h1>账号</h1>
            <input type="text" placeholder="输入你的账号：">
        </div>
     </template>
     <template id="n2">
        <div style="width: 200px;height: 200px;border: 2px solid rgb(100, 100, 196);">
            <h1>电话</h1>
            <input type="text" placeholder="输入你的电话：">
        </div>
     </template>
     <template id="n3">
        <div style="width: 200px;height: 200px;border: 2px solid rgb(100, 100, 196);">
            <h1>估价：</h1>
            <input type="text" placeholder="你心仪卖出的价格：">
        </div>
     </template>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var  vm = new Vue({
    el:"#app",
    data:{cfl:"qiubite1"},
    components:{
            'qiubite1':{template:'#n1'},
            'qiubite2':{template:'#n2'},
            'qiubite3':{template:'#n3'},
    }
})
    </script>
</body>
</html>

运行结果：

我们可以看到三个按钮的value的值设置成了组件的名字，双向绑定cfl(惩罚陆，没什么含义，自己乱起的)数据，单击按钮，就可以改变value的值从而更新cfl里面的值；component组件的is属性动态的绑定了cfl里面的值，根据这个is就知道哪个组件被渲染了。

二、内置组件

根据上面的实例结果，我们看到了输入框里输入数据，当你切换到别的组件的时候，原来组件的数据不会被保存，所以内置组件可以包裹我们的动态组件，会将往期的组件进行缓存，而不是销毁，他会把切换回去的组件缓存起来，做到保留组件状态。

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>组件之间的传递</title>
</head>
<body>
    <div id="app">
        <h1>小小闲置网</h1>
<input type="radio" name="tab" value="qiubite1" v-model="cfl">王者账号：
<img src="C:\Users\Administrator\Desktop\李宝\wangzhe.jpg" alt="" style="width: 30px;height:30px">
<input type="radio" name="tab" value="qiubite2" v-model="cfl">电话：
<input type="radio" name="tab" value="qiubite3" v-model="cfl">估价：
<keep-alive><component v-bind:is="cfl"></component></keep-alive>
</component>
    </div>
     <template id="n1">
        <div style="width: 200px;height: 200px;border: 2px solid rgb(100, 100, 196);">
            <h1>账号</h1>
            <input type="text" placeholder="输入你的账号：">
        </div>
     </template>
     <template id="n2">
        <div style="width: 200px;height: 200px;border: 2px solid rgb(100, 100, 196);">
            <h1>电话</h1>
            <input type="text" placeholder="输入你的电话：">
        </div>
     </template>
     <template id="n3">
        <div style="width: 200px;height: 200px;border: 2px solid rgb(100, 100, 196);">
            <h1>估价：</h1>
            <input type="text" placeholder="你心仪卖出的价格：">
        </div>
     </template>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var  vm = new Vue({
    el:"#app",
    data:{cfl:"qiubite1"},
    components:{
            'qiubite1':{template:'#n1'},
            'qiubite2':{template:'#n2'},
            'qiubite3':{template:'#n3'},
    }
})
    </script>
</body>
</html>

运行结果：

以上就是Vue动态组件与内置组件浅析讲解的详细内容，更多关于Vue动态组件与内置组件的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • Vue.extend 登录注册模态框的实现

    Vue.extend 登录注册模态框的实现

    这篇文章主要介绍了Vue.extend 登录注册模态框的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • vue.js使用Element-ui实现导航菜单

    vue.js使用Element-ui实现导航菜单

    这篇文章主要为大家详细介绍了vue.js使用Element-ui中实现导航菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 关于element-ui select 下拉框位置错乱问题解决

    关于element-ui select 下拉框位置错乱问题解决

    这篇文章主要介绍了关于element-ui select 下拉框位置错乱问题解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • Vue+ElementUI实现从后台动态填充下拉框的示例代码

    Vue+ElementUI实现从后台动态填充下拉框的示例代码

    本文主要介绍了Vue+ElementUI实现从后台动态填充下拉框的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-02-02
  • Vue3使用vant检索组件van-search遇到的问题小结

    Vue3使用vant检索组件van-search遇到的问题小结

    当清空按钮与检索按钮同时居右时,点击clear清空按钮事件时会同时触发click-right-icon事件,这个时候容易触发一系列问题,小编小编给大家分享Vue3使用vant检索组件van-search遇到的问题小结,感兴趣的朋友一起看看吧
    2024-02-02
  • 基于cropper.js封装vue实现在线图片裁剪组件功能

    基于cropper.js封装vue实现在线图片裁剪组件功能

    这篇文章主要介绍了基于cropper.js封装vue实现在线图片裁剪组件功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2018-03-03
  • import.meta.glob() 如何导入多个目录下的资源(最新推荐)

    import.meta.glob() 如何导入多个目录下的资源(最新推荐)

    import.meta.glob() 其实不仅能接收一个字符串,还可以接收一个字符串数组,就是匹配多个位置,本文给大家介绍import.meta.glob() 如何导入多个目录下的资源,感兴趣的朋友一起看看吧
    2023-11-11
  • Vue 短信验证码组件开发详解

    Vue 短信验证码组件开发详解

    Vue.js（读音 /vju&#720;/, 类似于 view）是一个构建数据驱动的 web 界面的库。这篇文章主要介绍了Vue 短信验证码组件开发详解,需要的朋友可以参考下
    2017-02-02
  • 如何用electron把vue项目打包为桌面应用exe文件

    如何用electron把vue项目打包为桌面应用exe文件

    这篇文章主要介绍了如何用electron把vue项目打包为桌面应用exe文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-05-05
  • Vue实现自定义字段导出EXCEL的示例代码

    Vue实现自定义字段导出EXCEL的示例代码

    这篇文章主要介绍了Vue实现自定义字段导出EXCEL的示例代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-08-08

最新评论