您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇内容介绍了“Vue动态组件与内置组件怎么用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
在vue中，有很多的组件可以挂载同一个挂载点上面，要在同一个挂载的点上的多个组件之间可以实现动态的切换渲染，我们可以通过内置组件component的is属性动态的绑定组件，然后我们就可以根据is的值来决定哪一个组件要被渲染，非常的方便。
我们通过一点简单的实例代码可以加深了解：
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <title>组件之间的传递</title> </head> <body> <div id="app"> <h2>小小闲置网</h2> <input type="radio" name="tab" value="qiubite1" v-model="cfl">王者账号： <img src="C:\Users\Administrator\Desktop\李宝\wangzhe.jpg" alt="" > <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 > <h2>账号</h2> <input type="text" placeholder="输入你的账号："> </div> </template> <template id="n2"> <div > <h2>电话</h2> <input type="text" placeholder="输入你的电话："> </div> </template> <template id="n3"> <div > <h2>估价：</h2> <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">
<h2>小小闲置网</h2>
<input type="radio" name="tab" value="qiubite1" v-model="cfl">王者账号：
<img src="C:\Users\Administrator\Desktop\李宝\wangzhe.jpg" alt="" >
<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 >
<h2>账号</h2>
<input type="text" placeholder="输入你的账号：">
</div>
</template>
<template id="n2">
<div >
<h2>电话</h2>
<input type="text" placeholder="输入你的电话：">
</div>
</template>
<template id="n3">
<div >
<h2>估价：</h2>
<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动态组件与内置组件怎么用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。