foreword
This is a whole series of Vue five-minute learning. It takes five minutes every day to read every little knowledge of Vue. The previous editor has summarized the relevant knowledge of Vue's components for you. You can go to the blogger's blog to find your favorite. It is not easy to read the blog. I hope everyone can give a like. Every like of yours is a great support for this blogger.
Well, without further ado, let's enter today's small five-minute learning time. We have learned about the components of vue earlier. Our blog post mainly explains the dynamic components and built-in components of vue.
1. Dynamic components
In Vue, there are many components that can be mounted on the same mount point. To achieve dynamic switching and rendering between multiple components on the same mount point, we can dynamically switch the rendering through the is property of the built-in component component. The binding component, and then we can decide which component to be rendered according to the value of is, which is very convenient.
We can deepen our understanding through a little simple example code:
Sample code:
<!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>
operation result:
We can see that the value of the value of the three buttons is set to the name of the component, the two-way binding of cfl (punishment, meaningless, messed up by yourself) data, click the button, you can change the value of the value to update the cfl The value of ; the is attribute of the component component dynamically binds the value in the cfl, according to this is to know which component is rendered.
2. Built-in components
According to the results of the above example, we see the input data in the input box. When you switch to other components, the data of the original component will not be saved, so the built-in component can wrap our dynamic component, and the previous component will be Cache, instead of destroying, will cache the components that are switched back, so that the state of the components is preserved.
Example code:
<!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>
operation result:
