prefacio
Esta es una serie completa de aprendizaje de cinco minutos de Vue. Se necesitan cinco minutos todos los días para leer cada pequeño conocimiento de Vue. El editor anterior ha resumido el conocimiento relevante de los componentes de Vue para usted. Puede ir al blog del blogger para encontrar su favorito. No es fácil leer el blog. Espero que todos puedan dar un me gusta. Cada me gusta tuyo es un gran apoyo para este blogger.
Bueno, sin más preámbulos, entremos en el pequeño tiempo de aprendizaje de cinco minutos de hoy. Hemos aprendido sobre los componentes de vue anteriormente. Nuestra publicación de blog explica principalmente los componentes dinámicos y los componentes integrados de vue.
1. Componentes dinámicos
En Vue, hay muchos componentes que se pueden montar en el mismo punto de montaje. Para lograr un cambio dinámico y renderizado entre múltiples componentes en el mismo punto de montaje, podemos cambiar dinámicamente el renderizado a través de la propiedad is del componente incorporado. El componente vinculante, y luego podemos decidir qué componente se renderizará de acuerdo con el valor de is, lo cual es muy conveniente.
Podemos profundizar nuestra comprensión a través de un pequeño código de ejemplo simple:
Código de muestra:
<!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>
resultado de la operación:
Podemos ver que el valor del valor de los tres botones se establece en el nombre del componente, el enlace bidireccional de datos cfl (castigo, sin sentido, desordenado por usted mismo), haga clic en el botón, puede cambiar el valor del valor para actualizar el cfl El valor de ; el atributo es del componente componente vincula dinámicamente el valor en el cfl, de acuerdo con esto es para saber qué componente se representa.
2. Componentes incorporados
De acuerdo con los resultados del ejemplo anterior, vemos los datos de entrada en el cuadro de entrada. Cuando cambia a otros componentes, los datos del componente original no se guardarán, por lo que el componente integrado puede envolver nuestro componente dinámico y el componente anterior será Caché, en lugar de destruir, almacenará en caché los componentes que se vuelven a cambiar, para que se conserve el estado de los componentes.
Código de ejemplo:
<!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>
resultado de la operación:
