vue3 常用函数\\组件传值

一、简介

组合式api

1、 setup（）

• 组合式api的入口
• 页面启动后，第一个自动执行的函数
• 定义项目中所有的变量、方法
• 所有的变量和方法，只有return出去，在页面视图中正常使用

  <template>
      
      <h1> {{data}} h1>
      <button @click="handleLogin">登录button>
  template>
  <script>
      export default {
          name: "login",
          setup() {
            const data = "变量"
            const handleLogin = () => {//方法 es6写法
              console.log("qqqq")
            }
  
            return {//返回才能在页面中使用
              data,
              handleLogin,
            }
          }
      }
  script>
  

2、ref函数

• 当ref里面的值发生改变时，视图会自动更新—此值也就是响应式的数据
• ref可操作基本数据类型，也可以操作复杂数据类型
• 建议：ref操作基本数据类型
• 使用需要引入import {ref} from “vue”

  <template>
      
      <h1> {{name}} h1>
      <button @click="handleLogin">登录button>
  template>
  <script>
    import {ref} from "vue"
      export default {
          name: "login",
          setup() {
            const name = ref("变量")
            const handleLogin = () => {//方法 es6写法
                name.value="123123"
            }
            return {//返回才能在页面中使用
              name,
              handleLogin,
            }
          }
      }
  script>
  

3、reactive

• reactive专门用来创建复杂数据类型的响应式引用（基本数据类型不适用）
• 可以响应深层次的数据，例子：多维数组
• 返回值是一个响应式的proxy 对象–vue底层响应对象
• 使用需要引入import {reactive} from “vue”

  <template>
      <!--  v-text的简写-->
      <h1> {{name.loginName}} </h1>
      <h1> {{name.pwd}} </h1>
      <button @click="handleLogin">登录</button>
  </template>
  <script>
    import {reactive} from "vue"
      export default {
          name: "login",
          setup() {
            const name = reactive({
                loginName: "sysadmin",
                pwd: "admin111111"
            })
            const handleLogin = () => {//方法 es6写法
                name.loginName="admin"
                name.pwd="111111"
            }
  
            return {//返回才能在页面中使用
              name,
              handleLogin,
            }
          }
      }
  </script>
  

4、toRef 函数

• toRef 可以创建响应式数据
• ref本质是复制粘贴，脱离了与原数据的交互
• Ref函数将对象中的属性变成响应式数据，修改响应式数据不会影响原数据，但是会更新视图
• toRef函数本质是引用，与原数据有交互，修改响应式数据会影响原数据，但是不会更新视图
• 使用时需引用

  import {toRef} from "vue"
  toRef(需要操作的对象,对象的某一个属性)
  

5、toRefs 函数

• toRefs可以批量创建多个响应式数据
• toRefs函数本质是引用，与原数据有交互，修改响应式数据会影响原数据，但是不会更新视图
• toRefs函数可以与其他响应式函数交互，更加的方便的处理数据
• 使用时需引用

  import {toRefs} from "vue"
  toRefs(需要操作的对象)
  

  <template>
      <!--  v-text的简写-->
      <h1> {{loginName}} </h1>
      <h1> {{pwd}} </h1>
      <button @click="handleLogin">登录</button>
  </template>
  <script>
    import {reactive,toRefs} from "vue"
      export default {
          name: "login",
          setup() {
            const name = reactive({
                loginName: "sysadmin",
                pwd: "admin111111"
            })
            return {//返回才能在页面中使用,三个点是es6里面的拓展运算符
              ...toRefs(name),
              handleLogin,
            }
          }
      }
  </script>
  

6、计算属性 computed

• (1) 与vue2 一样，均是用来监听数据变化
• (2) 需要引入：import {toRefs} from “vue”

  <template>
    小王年龄：<input type="number" v-model="wang"><br>
    小李年龄：<input type="number" v-model="li"><br>
    总计：<input type="number" v-model="sum"><br>
    相乘：<input type="number" v-model="multiply">
  </template>
  <script>
    import {computed,reactive,toRefs} from "vue"
      export default {
          name: "login",
          setup() {
            const li =""
            const wang = ""
            const res = reactive({li,wang})
            const sum = computed(()=>{
              return res.li+res.wang
            })
            const multiply = computed(()=>{
              return res.li*res.wang
            })
            return {//返回才能在页面中使用
              ...toRefs(res),
              multiply,
              sum
            }
          }
      }
  </script>
  

7、watch侦听器

• 与vue2一样一致，均是用来监听数据变化的
• watch(监听的对象，(newVal,oldVal)=>{}[,{immediate:true}])，第三个参数是进入页面时就开始监听新的值，立即监听

  <template>
    <h1>num1：{{num1}}</h1>
    <h1>num2：{{num2}}</h1>
    <h1>num3：{{num3.age.num}}</h1>
    <button @click="num1++">num1++</button>
    <button @click="num2+=2">num2++</button>
    <button @click="num3.age.num++">num3对象</button>
  </template>
  <script>
    import {watch,reactive,toRefs,ref} from "vue"
      export default {
          name: "login",
          setup() {
            const num1 =ref(0)
            const num2 =ref(1)
            const num3 = reactive({
              name:"小狗",
              age:{
                num:1
              }
            })
  
            //监听一个对象(监听的对象，(newVal,oldVal)=>{})
            //newVal:最新的结果  oldVal：上一次的结果
            watch(num1,(newVal,oldVal)=>{
              console.log(newVal,oldVal)
            },{immediate:true})
            //监听多个对象
            watch([num1,num2],(newVal,oldVal)=>{
              console.log(newVal,oldVal)
            })
            /*
            * 监听整个reactive响应数据的变化，只能监听到最新的结果
            * */
            watch(num3,(newVal)=>{
              console.log(newVal)
            })
            /*
           * 监听reactive中某一个属性值响应数据的变化
           * */
            watch(()=>num3.age.num,(newVal,oldVal)=>{
              console.log(newVal,oldVal)
            })
  
  
            return {//返回才能在页面中使用
              // ...toRefs(),
              num1,
              num2,
              num3
            }
          }
      }
  </script>
  

8、watchEffect

• watchEffect 如果存在的话，在组件初始化的时候就会执行一次用以收集依赖

• watch可以获取到新值和旧值，而watchEffect拿不到

• watchEffect不需要指定监听的属性，它会自动收集依赖，只要我们回调中引用到了响应式的属性，那么这些属性变更的时候，这个回调就会执行，而watch只能监听指定的属性

  <template>
    <h1>num1：{{num1}}</h1>
    <h1>num2：{{num2}}</h1>
    <h1>num3：{{num3.age.num}}</h1>
    <button @click="num1++">num1++</button>
    <button @click="num2+=2">num2++</button>
    <button @click="num3.age.num++">num3对象</button>
  </template>
  <script>
    import {watchEffect,reactive,ref} from "vue"
      export default {
          name: "login",
          setup() {
            const num1 =ref(0)
            const num2 =ref(1)
            const num3 = reactive({
              name:"小狗",
              age:{
                num:1
              }
            })
            //开始监听
            const res =watchEffect(()=>{
              //监听的属性 普通对象
              const a = num1.value
              // console.log(a)
              //监听复杂对象的属性
              const b = num3.age.num
              console.log(b)
            })
            //停止监听
            res()
  
  
            return {//返回才能在页面中使用
              // ...toRefs(),
              num1,
              num2,
              num3
            }
          }
      }
  </script>
  

9、shallowRef 和shallowReactive

• shallowRef：只处理基本数据类型
• shallowReactive：只处理第一层数据

  <template>
    <h1>姓名：{{name}}</h1>
    <h1>年龄：{{age.num}}</h1>
    <button @click="name+='2'">姓名</button>
    <button @click="age.num++">年龄</button>
  </template>
  <script>
    import {shallowReactive,shallowRef,ref,toRefs} from "vue"
      export default {
          setup() {
            const num3 = shallowReactive({
              name:"小狗",
              age:{
                num:1
              }
            })
            return {//返回才能在页面中使用
              ...toRefs(num3),
            }
          }
      }
  </script>
  

二、组件传值

父子，子子，祖孙

1、父子 传值

进入页面即刻传值

• 父组件

//进入页面即刻传值
<template>
	<helloworld/>
</template>
<script>
import {reactive} from "vue"
import helloworld from "组件路径"
export default {
	compoents:{
		helloworld
	}，
	setup() {
		const p1 = reactive({name:"小宋",age:12})
		provide("p",p1)//祖传 第一个参数是子组件用来识别的参数
	}
}

//点击传值

• 子组件

export default {
	name:"helloworld",
	setup(){
		const res = inject("p")//孙收
	}

点击传值

• 父组件

<template>
	<helloworld ref ="val"/>//在父组件中找到子组件的节点
</template>
<script>
import {reactive,ref} from "vue"
import helloworld from "组件路径"
export default {
	compoents:{
		helloworld
	}，
	setup() {
		const val = ref()
		const p1 = reactive({name:"小宋",age:12})
		function btn(){//点击事件调用子组件的方法
			val.vlaue.receive(p1)
		}
		return{btn,val}
}
</script>

• 子组件

export default {
	name:"helloworld",
	setup(){
		//被父组件调用的方法
		function receive(val){
			console.log(val)
		}
		return{receive}
	}