Vue3 组合式Api

一、响应式变量

声明响应式变量在setup里使用ref 包裹， setup中调用需要使用x.value,html中不需要.value  

声明响应式对象使用reactive

引入 

import { ref, reactive} from "vue"; 

 

<template>
  <div>
    <div>
      {{ count }}
    </div>
    <div><button @click="btn">点击</button></div>
    <div>
      <input v-model="count" />
    </div>
    <div>
      {{ obj.name }}
    </div>
    <div>
      <input v-model="obj.name" />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive，onMounted } from "vue"; 
//响应式变量使用ref 
const count = ref(10); 

//响应式对象使用reactive 
const obj = reactive({ name: "tom", age: 18 }); 
//方法 
function btn() { 
//setup里使用ref变量需要 .value,html里不需要 
count.value++; 
} 
//声明周期钩子
 onMounted(() => { console.log("加载"); }); 

</script>

 

二、计算属性

<template>
  <div>
    <div>
      {{ fullname }}
    </div>
    <div>
      <input v-model="name.firstname" />
    </div>
  </div>
</template>

<script setup>
import { reactive, computed } from "vue";

const name = reactive({ firstname: "Johnny", lastname: "Depp" });
const fullname = computed(() => {
  return name.firstname + name.lastname;
});
</script>

 

三、监听

不指定参数

<template>
  <div>
    <div>
      <input v-model="name.firstname" />
    </div>
  </div>
</template>

<script setup>
import { reactive, watch } from "vue";

const name = reactive({ firstname: "Johnny", lastname: "Depp" });
watch(() => {
  //
  console.log(name.firstname);
 //监控对象时，里面的任意属性，变化都能监控到
  console.log(JSON.stringify(name));
});
</script>

指定参数

<template>
  <div>
    <div>
      <input v-model="name.firstname" />
    </div>
  </div>
</template>

<script setup>
import { reactive, watch } from "vue";

let name = reactive({ firstname: "Johnny", lastname: "Depp" });
let count=0;
//传参
watch(name,() => {
  console.log(count++);
});
</script>

 

四、生命周期

<script setup>
import { onMounted } from "vue";

//声明周期钩子
 onMounted(() => { console.log("加载"); }); 
</script>

 

五、组件

1.基本使用

注册组件

BlueText.vue

<template>
  <h1 style="color: blue">我是什么颜色？</h1>
</template>

使用组件

<template>
<!-- 使用 -->
<blue-text />
</template>

<script setup>
//导入
import  BlueText  from "../components/BlueText.vue";
</script>

 2.父向子传值

注册组件

BlueText.vue

<template>
  <h1 style="color: blue" :answer="answer">我是什么颜色？{{ answer }}</h1>
</template>

<script setup>
import { defineProps } from "vue";

const props = defineProps({
  answer: String,
});
console.log('颜色：',props.answer);
</script>

使用组件

<template>
  <!-- 使用 -->
  <blue-text :answer=color />
</template>

<script setup>
//导入
import BlueText from "../components/BlueText.vue";
let color="蓝色"
</script>

 

3子向父传值

 子组件  SonBtn.vue

<template>
  <button @click="btn">子按钮</button>
</template>

<script setup>
// 导入 defineEmits 组件
import { defineEmits } from "vue";

// 定义
const emit = defineEmits(["btn"]);

function btn() {
  emit("myaddevent", 1);
}
</script>

父组件

<template>
  <!-- 使用 -->
  <div>
    <div>
      {{ count }}
    </div>
    <div>
      <son-btn @myaddevent="fuaddevent"></son-btn>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
//导入
import SonBtn from "../components/SonBtn.vue";
let count = ref(10);
function fuaddevent(data) {
  count.value = count.value + data;
}
</script>

 

4.非prop

 

5.父组件跨级传深层子组件

Provide / Inject

 孙子层 GrandSon.vue

<template>
  <div>xxx{{ title }}</div>
</template>

<script setup>
import { inject } from "vue";
// inject的参数为provide过来的名称
let title = inject("title");
</script>

儿子层 Son.vue

<template>
<grand-son />
</template>

<script setup>
import GrandSon from "./GrandSon.vue";
</script>

父层

<template>
  <!-- 使用 -->
  <div>
    <div>
      <son-btn></son-btn>
    </div>
    <div>
      <button @click="btn">同时改变title</button>
    </div>
  </div>
</template>

<script setup>
import { ref, provide } from "vue";
//导入
import SonBtn from "../components/Son.vue";
//provide的第一个为名称，第二个值为所需要传的参数
let title = ref("abc");
provide("title", title); // provide的第一个为名称，第二个值为所需要传的参数

function btn() {
  title.value = "变变变";
}