Vue-阿里云开发者社区

Vue

2022-10-16 110

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 1. computed计算属性2. watch侦听器3. 组件注册全局组件局部组件注册4. 组件间通信父组件传递给子组件（props）Props有两种常见用法非props的attribute子组件传递给父组件($emit)

1. computed计算属性

任何包含响应式数据的复杂逻辑，都应该使用计算属性

计算属性将被混入到组件实例中

所有getter和setter的this 上下文自动的绑定为组件实例

computed计算缓存

computed是有缓存的

也就是说当数据不发生变化时，计算属性时不需要重新计算的

但是如果依赖的数据发生改变了，计算属性依旧会重新进行计算

<divid="app"><!--调用多次--><h2>{{full}}</h2><h2>{{full}}</h2><h2>{{full}}</h2><h2>{{full}}</h2><div>computed: {
// 默认是一个函数 fullName() {
returnthis.firstName+' - '+this.lastName  },
// 也可以是一个对象full:{
get() {
//只会打印一次 因为数据没有变化console.log("11111")
returnthis.firstName+this.lastName    }
  },
textt:{
get() {
returnthis.texts.split(' ').reverse().join(" ")
    }
  }
},

cumptued计算属性的get和set

computed: {
// 对象写法fullName: {
get() {
returnthis.firsetName+this.lastName          },
set(value) {
constvalues=value.split(' ')
this.firsetName=values[0]
this.lastName=values[1]
          }
        }
      },
methods: {
btns() {
this.fullName="你好 世界"        }
      }

2. watch侦听器

用于声明在数据更改时调用的侦听回调

官方文档

<divid="app"><h2>{{message}}</h2><button@click="btns">修改</button></div>constapp=Vue.createApp({
data() {
return {
message: "hello world"        }
      },
methods: {
btns() {
this.message="你好世界"        }
      },
watch: {
message(val, oldval) {
console.log("我改变了", val, oldval)
        }
      }

侦听器的配置

watch: {
info: {
handler(newvalue, oldvalue) {
console.log(Vue.toRaw(newvalue,oldvalue))
    },
// 深度监听deep: true,
// 第一次监听immediate:true  }
}

3. 组件注册

全局组件：在任何其他的组件中都可以使用的组件

局部组件：只有在注册的组件中才能使用的组件

全局组件

import { createApp } from'vue'constapp=createApp({})
app.component(
// 注册的名字'MyComponent',
// 组件的实现  {
/* ... */  }
)
<divid="app"><my-home></my-home></div><templateid="test"><h2>你好</h2></template><script>constApp= {}
constapp=Vue.createApp(App)
app.component("my-home",{
template:'#test',
data() {
return {
        }
      },
m注册局部组件使用components<divid="app"><product-item></product-item></div><templateid="icon"><div><h1>我是一个MyComponent组件</h1><h4>{{title}}</h4></div></template><script>constapp=Vue.createApp({
components: {
ProductItem: {
template: '#icon',
data() {
return {
title: "我是标题"            }
          }
        }
      },
data() {
return {
        }
      },
methods: {
      },
computed: {
      },
wathch: {
      },
    })
// 挂载app.mount("#app")ethods: {
      },
    })
// 挂载app.mount("#app")
</script>

局部组件注册

注册局部组件使用components<divid="app"><product-item></product-item></div><templateid="icon"><div><h1>我是一个MyComponent组件</h1><h4>{{title}}</h4></div></template><script>constapp=Vue.createApp({
components: {
ProductItem: {
template: '#icon',
data() {
return {
title: "我是标题"            }
          }
        }
      },
data() {
return {
        }
      },
methods: {
      },
computed: {
      },
wathch: {
      },
    })
// 挂载app.mount("#app")

4. 组件间通信

官方文档

父组件传递给子组件：通过props属性

子组件传递给父组件：通过$emit触发事件

父组件传递给子组件（props）

场景：子组件传递给父组件需要不同的值时

<template><divclass="app"><!--个人信息一个展示小明一个展示小李--><app-infosname="小明"/><app-infosname="小李"/></div></template>

使用方法：

首先在父组件注册一些自定义的attribute
父组件给子组件attribute赋值
子组件通过props接受对应的attribute

注意：props接受的属性会被暴露到this上

<app-infosname="小明"/><app-infosname="小李"/>exportdefault {
props:['name'],
data() {
return {
    }
  },
created() {
// props会暴露到 this 上console.log(this.name)
  }
}

Props有两种常见用法

数组和对象

props: {
name: {
type:String,
defalut: '我是默认值'    },
age :{
type:Number,
defalut: 0    },
// 如果是一个复杂数据类型 必须写一个函数friend: {
type:Object,
defalut:() => ({ name : 'xiaoluo'} )
    } 
  },
exportdefault {
props: {
// 基础类型检查//（给出 `null` 和 `undefined` 值则会跳过任何类型检查）propA: Number,
// 多种可能的类型propB: [String, Number],
// 必传，且为 String 类型propC: {
type: String,
required: true    },
// Number 类型的默认值propD: {
type: Number,
default: 100    },
// 对象类型的默认值propE: {
type: Object,
// 对象或者数组应当用工厂函数返回。// 工厂函数会收到组件所接收的原始 props// 作为参数default(rawProps) {
return { message: 'hello' }
      }
    },
// 自定义类型校验函数propF: {
validator(value) {
// The value must match one of these stringsreturn ['success', 'warning', 'danger'].includes(value)
      }
    },
// 函数类型的默认值propG: {
type: Function,
// 不像对象或数组的默认，这不是一个工厂函数。这会是一个用来作为默认值的函数default() {
return'Default function'      }
    }
  }
}

非props的attribute

当父组件传递属性给子组件时，子组件没有用props接受，那么这个属性被称为非props的attribute

非props的attribute会自动添加到子组件的根元素上面

<divclass="app"><!--后面两个属性没有用props接受会自动添加到子组件的根元素上面--><app-infosnames="xiaoluo" :age="20"address="广州市"class="box"/></div>props: {
names: {
type:String,
default: '我是默认值'    },
age :{
type:Number,
default: 100    }
  }

如果不想让子组件接收(穿透)可以设置inheritAttrs属性

exportdefault {
//设置为false后，非props的attribute不会穿透给子组件的根元素inheritAttrs:false,
props: {
names: {
type:String,
default: '我是默认值'    },
age :{
type:Number,
default: 100    }
  }
}

子组件传递给父组件($emit)

场景：

当子组件有一些事件发生时，父组件需要接收
子组件有一些内容想要传递给父组件的时候

案列：点击子组件修改父组件的数字

<template><divclass="app"><h2>当前技术：{{counter}}</h2><!--子组件传递的事件--><count-add@addClick="addBtns"></count-add><count-sub@subClick="subBtns"></count-sub></div></template><script>importCountAddfrom"./components/CountAdd.vue"importCountSubfrom"./components/CountSub.vue"exportdefault {
components: {
CountAdd,
CountSub  },
data() {
return {
counter: 0    }
  },
methods: {
addBtns(index) {
this.counter+=index    },
subBtns(index) {
this.counter-=index    }
  }
}
</script><stylescoped></style><template><divclass="countadd"><divclass="add"><button@click="addCount(1)">+1</button><button@click="addCount(5)">+5</button><button@click="addCount(10)">+10</button></div></div></template><script>exportdefault {
// 用于声明由组件触发的自定义事件。emits:['addClick'],
methods: {
addCount(index) {
// 自定义事件 this.$emit("addClick",index)
    }
  }
}
</script><stylelang="less"scoped></style>