6. Componente en Vue
6.1, función del componente
Función de componente: se usa para reducir la cantidad de código en la instancia de Vue. En el proceso de desarrollo futuro usando Vue, la página se puede dividir en múltiples componentes de acuerdo con diferentes funciones comerciales, y luego se usan múltiples componentes para completar el diseño del página completa. Es conveniente utilizar Vue para la administración de páginas de desarrollo en el futuro, y es conveniente para los desarrolladores mantenerlo.
6.2. Uso de componentes
6.2.1, registro de componentes globales
Descripción: el componente global está registrado en la instancia de Vue y el componente se puede usar en el alcance de cualquier instancia de Vue en el futuro
1、开发一个全局组件
//全局组件注册 参数1：组件名称 参数2：组件配置对象:{}
// template：用来书写组件的html模板（注意：在template中必须存在一个容器 例如 div）
Vue.component('login',{
template:'<div> <h1>用户登录</h1> </div>'
});
2、使用全局组件 在Vue实例范围内
<login></login>
# 注意：
1、Vue.component 用来开发全局组件
参数1： 组件名称
参数2：组件配置():'' 用来书写组件的html代码，template中必须有一个root元素
2、使用时需要在Vue的作用范围内根据与组件名使用全局组件
3、如果在注册组件的过程中使用 驼峰命名组件的方式，在使用组件时，必须将驼峰的所有单词小写加入—进行使用
6.2.2, el uso de componentes parciales
Nota: El registro del componente se completa registrando el componente en una propiedad de Componentes en la instancia de Vue correspondiente. Este método no causará acumulación en la instancia de Vue.
- El primer método de desarrollo
<script>
//局部组件登录模板
let login ={
//具体组件名称
template: '<div><h2>小爽帅到拖网速2</h2></div>'
}
const app = new Vue({
el: "#app",
data: {
msg: "小爽帅到拖网速",
},
methods: {
},
components:{
//用来注册局部组件
login:login //注册局部组件
}
});
</script>
//局部组件使用 在Vue实例范围内
<login></login>
-
El segundo método de desarrollo
//1、声明局部组件模板，template 标签：注意 ：Vue实例作用访问外声明 <template id="loginTemplate"> <h1>小爽帅到拖网速 之 方式二</h1> </template> //2、定义变量用来保存模板配置对象 let login={ //具体局部组件名称 template:'#lgoinTemplate' //使用自定义template标签选择器即可 }; //3、注册组件 const app = new Vue({ el: "#app", data: { msg: "小爽帅到拖网速", }, methods: { }, components:{ //用来注册局部组件 login:login //注册局部组件 } }); //4、局部组件使用 在Vue实例范围内 <lgoin></login>
6.3 Uso de Prop
Rol: los accesorios se utilizan para pasar los datos estáticos o dinámicos correspondientes al componente.
6.3.1. Pasar datos estáticos al componente declarando datos estáticos en el componente
//1、声明组件模板配置对象 props作用 用来接收使用组件时通过组件标签传递的数据
let login={
template:"<div><h1>欢迎:{
{name}} 座右铭：{
{motto}}</h1></div>",
props:['name','motto']
}
//2、注册组件
const app = new Vue({
el: "#app",
data: {
},
methods: {
},
components:{
login //组件注册
}
});
//3、通过组件完成数据传递
<login name="小爽" motto="木叶飞舞之处，火亦生生不息！"></login>
# 总结
1、使用组件时可以在组件上定义多个属性以及对应数据
2、在组件内部可以使用props数组声明多个定义在组件上的属性名 日后可以在组件中通过{
{属性名}}方式获取数组中属性值
6.3.2. Declarar datos dinámicos en el componente y pasarlos al componente
//1、声明组件模板对象
//定义一个局部组件声明
const login={
template:'<div><h2>火影:{
{name}} 年龄：{
{age}}</h2></div>',
props: ['name','age']
}
//2、注册局部组件
const app = new Vue({
el: "#app",
data: {
msg: "小爽帅到拖网速",
Age:21
},
methods: {
},
components:{
login //注册组件
}
});
//3、使用组件
//使用v-bind 形式将数据绑定Vue实例中data属性，日后data属性发生变化，组件内部数据也跟着发生变化
<login :name="msg" :age="Age"></login>
6.3.3 Flujo de datos unidireccional de prop
Todos los accesorios forman un enlace descendente unidireccional entre sus accesorios padre e hijo : la actualización del accesorio padre fluirá hacia los componentes secundarios, pero lo contrario no funcionará.
Esto evitará cambiar accidentalmente el estado del componente principal del componente secundario, lo que dificultará la comprensión del flujo de datos de su aplicación.
Además, cada vez que cambia el componente principal, todos los accesorios del componente secundario se actualizarán al último valor. Esto significa que no debe cambiar los accesorios dentro de un subcomponente. Si hace esto, Vue emitirá una advertencia en la consola del navegador.
6.4. Definir datos y eventos en el componente
1. Los datos que pertenecen al componente se definen en el componente
const login={
template:"<div><h1>欢迎：{
{name}} </h1> <ul><li v-for='(item,index) in lists'>{
{index+1}}:{
{item}}</li></ul></div>",
data(){
return {
name:"小爽",
lists:['spring','springMVC','Mybatis']
}
}
}
2. Definición de eventos en componentes
const login={
template:"<input type='button' @click='change' value='点击触发事件'>",
data(){
return {
name:"小爽",
lists:['spring','springMVC','Mybatis']
}
},
methods:{
change(){
alert(this.name);
}
}
}
# 总结
1、组件中定义事件和直接在Vue中定义事件基本一致，直接在组件内部对应html代码加入@事件名-函数名方式即可
2、在组件内部使用methods属性用来定义对应的事件即可，事件函数中this指向的是当前组件的实例
6.5 Pase el evento al componente secundario y llame al evento en el componente secundario
Los eventos relacionados pasados en la llamada de resumen del subcomponente deben llamarse usando este método. $ Emit ('nombre de función')
//1、声明组件
const login = {
template: "<div> <h1>小爽{
{message}} </h1><input type='button' value='点击' @click='change'></div>",
/*不能再子组件中改变数据*/
data() {
return {
message: this.name
}
},
methods: {
change() {
//调用Vue实例中的函数
this.$emit('find'); //调用组件传递过来的其他函数时需要使用this.$emit('函数名调用')
}
},
props: ['name']
}
//2、组件注册
const app = new Vue({
el: "#app",
data: {
msg: "小爽帅到拖网速",
},
methods: {
findAll(){
//一个事件函数 将这个函数传递给子组件
alert('Vue实例中定义的函数')
}
},
components: {
login
}
});
//3、使用组件
<div id="app">
<login :name="msg" @find="findAll"></login> ======》 在组件内部使用 this.$emit('find')
</div>