前端培训丁鹿学堂:vue3入门指南（三）

vue3 之watchEffect监听数据

在vue3中还可以通过watchEffect来监听响应式，它的返回值是一个函数，可以通过调用函数解除监听 它的参数是一个回调函数，当响应式数据发生改变会立即触发回调函数

import {ref,watchEffect} from 'vue'
export default {
    setup () {
        let num = ref(2)
        let add = ()=>{
            num.value ++
        }
        let result = watchEffect(()=>{
            if(num.value>5){
                console.log('不能再加了')
                num.value = 5
            }
        })
        result()
        return {num,add}
    }
}
</script>

vue3中使用props传参

父组件传值给子组件，组件通过props接收，同时作为参数传递给setup函数使用

<v3 :num="3"></v3>

<template>
    {{num}}
</template>

<script>
import {ref} from 'vue'
export default {
    props:['num'],
    setup (props) {
        let num = ref(props.num)
        return {num}
    }
}
</script>

vue3中子组件同时事件传参给父组件的写法

setup函数第二个参数是一个对象，里面有emit方法。通过emit方法触发父组件绑定事件，传递参数 父组件中设置：

<template>
<v3  @change="changeHandle"></v3>
{{num2}}
</template>   
// -----------------
setup(){
      let num2 = ref(0)
      let changeHandle = (v)=>{
        num2.value = v
      }
      return {num2,changeHandle}
    }

子组件中触发

  <div @click="handle">增加</div>
// ----------------------------------
export default {
    setup (props,context) {
        let num = ref(0)
        const {emit} = context
        let handle = ()=>{
            num.value++
            emit('change',num.value)
        }
        return {num,handle}
    }
}