8. computed 函数
1. computed函数，是用来定义计算属性的，计算属性不能修改
2. 给computed传入函数，返回值就是计算属性的值
3. 给computed传入对象，get获取计算属性的值，set监听计算属性改变。
4. 简单用法
1. // 计算属性：当你需要依赖现有的响应式数据，根据一定逻辑得到一个新的数据。
const age = ref(16)
2. //得到后年的年龄
const newAge = computed(()=>{
// 该函数的返回值就是计算属性的值
return age.value + 2
})
3. // 返回可以直接渲染
return {age, newAge}
5. 高级用法
1. //计算属性：当你需要依赖现有的响应式数据，根据一定逻辑得到一个新的数据。
const age = ref(16)
2. // 计算属性高级用法，传人对象
const newAge = computed({
// get函数，获取计算属性的值
get(){
return age.value + 2
},
// set函数，当你给计算属性设置值的时候触发 value是输入的值
set (value) {
age.value = value - 2
}
})
3. //在上面可以输入newAge的值
return {age, newAge}
9. ref 属性
1. 获取单个DOM或者组件 , 获取DOM或者组件实例可以使用ref属性，写法和vue2.0需要区分开
2. 单个元素：先申明ref响应式数据，返回给模版使用，通过ref绑定数据
3. 遍历的元素：先定义一个空数组，定一个函数获取元素，返回给模版使用，通过ref 绑定这个函数
4. 获取单个元素
1. <!-- 单个元素 -->
<div ref="dom">我是box</div>
2. // 获取单个元素
// 2.1 先定义一个空的响应式数据ref定义的
// 2.2 setup中返回该数据，你想获取那个dom元素，在该元素上使用ref属性绑定该数据即可。
const dom = ref (null)
onMounted(()=>{
console.log(dom.value)
})
3. // 返回出去该元素
return {dom}
5 . 获取遍历的元素
1. <!-- 被遍历的元素 -->
<ul>
<li v-for="i in 4" :key="i" :ref="setDom">第{{i}}LI</li>
</ul>
2. // 获取v-for遍历的元素
// 2.1 定义一个空数组，接收所有的LI
// 2.2 定义一个函数，往空数组push DOM
const domList = []
const setDom = (el) => {
domList.push(el)
}
onMounted(() => {
console.log(domList)
})
3. // 返回出去该元素
return {setDom}
10. 父子通讯
1. 父传子
1. 先把子组件链入到父组件中 ( 这里我就不在赘述了 )
2. //2.1 在子标签的中进行正常的传值
<Son :money="money" />
//2.2 父组件的数据传递给子组件
setup () {
const money = ref(100)
return { money }
}
3. // 子组件接收父组件数据使用props即可
props: {
money: {
type: Number,
default: 0
}
4. // 获取父组件数据money
setup (props) {
console.log(props.money)
}
2. 子传父
1. 在子标签的中进行正常的传值
<Son @change-money="updateMoney"/>
2.在组件中建一个按钮 点击触发
<button @click="changeMoney">花50元</button>
setup (props, {emit}) {
// 获取父组件数据money
console.log(props.money)
// 向父组件传值
const changeMoney = () => {
// 消费50元
// 通知父组件，money需要变成50
emit('change-money', 50)
}
return {changeMoney}
}
11. 依赖注入
-
使用场景：有一个父组件，里头有子组件，有孙组件，有很多后代组件，共享父组件数据
-
上说明!
1.我们可以传数据跟函数 1-1 // 将数据提供给后代组件 provide provide('money', money) 1-2 // 将函数提供给后代组件 provide provide('changeMoney', changeMoney) 2. 接收 setup () { // 接收祖先组件提供的数据 const money = inject('money') return { money } } 3.接收 const changeMoney = inject('changeMoney') 接收的函数可以直接使用
12. computed 函数
-
computed函数,是用来定义计算属性的,计算属性不可以修改
-
给computed传入函数，返回值就是计算属性的值
-
给computed传入对象，get获取计算属性的值，set监听计算属性改变
-
基本使用 :
1. // 计算属性：当你需要依赖现有的响应式数据，根据一定逻辑得到一个新的数据。 const age = ref(16) 2. // 得到后年的年龄 const newAge = computed(()=>{ // 该函数的返回值就是计算属性的值 newAge可以直接使用 return age.value + 2 }) 3. // return 出去 return {age, newAge} -
高级用法 :
1. // 计算属性：当你需要依赖现有的响应式数据，根据一定逻辑得到一个新的数据。
const age = ref(16)
2. // 计算属性高级用法，传人对象
const newAge = computed({
// get函数，获取计算属性的值
get(){
return age.value + 2
},
// set函数，当你给计算属性设置值的时候触发
set (value) {
age.value = value - 2
}
})
