vue3基础学习属性，传参，赋值

父组件

<template>
  <h1>{{msg}}</h1>
  <button @click="handleMsg">修改信息</button>
  <span>我的名字：{{user.name}}</span>
  <input type="text" v-model="user.name">
  <span>信息颠倒{{reMsg}}</span>
  <div>
    <button @click="count++">{{count}}</button>
  </div>
  <div>
    <Child :msg="msg" @sendParents="getFn"></Child>
  </div>
  <div>
    <p>测试循环</p>
    <h6 v-for="(item,i) in oddStars" :key="i">{{item}}</h6>
  </div>
</template>

<script setup>
  import { ref, reactive, computed, watch, watchEffect, onMounted, onBeforeMount, onUpdated, onBeforeUpdate } from "vue";
  import Child from "./components/Child.vue"
  // ref用于基础数据类型，reactive用于对象,computed:计算属性,watch:监听,watchEffect:也属于监听(深度监听);on开头的生命周期
  let msg = ref("helloword");
  let count = ref(0);
  let user = reactive({
    name: "张三",
  })
  function handleMsg() {
    console.log("asg");
    msg.value = "世界"
  }
  let reMsg = computed(() => {
    return msg.value.split("").reverse().join("")
  })
  //监听单个数据(基本数据类型)
  // watch(count,(newValue,oldValue)=>{
  //   console.log("newValue",newValue);
  //   console.log("oldValue",oldValue);

  // })
  //监听计算对象（对象）
  // watch(()=>user.name,(newValue,oldValue)=>{
  //   console.log("newValue",newValue);
  //   console.log("oldValue",oldValue);

  // })
  //监听多个属性
  watch([count, () => user.name], (newValue, oldValue) => {
    console.log("newValue", newValue);
    console.log("oldValue", oldValue);

  })
  //深度监听（立即执行）
  watchEffect(() => {
    console.log(count.value);
  })
  //父子方法
  function getFn(val) {
    msg.value = val.msg;
  }
  //生命周期
  onMounted(() => {
    console.log("挂在之后");
  })
  onBeforeMount(() => {
    console.log("挂载之前");
  })
  onUpdated(() => {
    console.log("修改之后");
  })
  onBeforeUpdate(() => {
    console.log("修改之前");
  })
  //for循环和if优先顺序
  //循环里面进行判断的时候vue3不能再标签上做，只能用计算属性
  var stars = reactive(["张三", "李四", "王二麻子"]);
  var oddStars = computed(() => {
    return stars.filter((item, i) => i % 2 == 0)
  })


</script>

<style scoped>
  .logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
  }

  .logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }

  .logo.vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
  }
</style>

子组件

<template>
    <h1>父组件传递过来的数据:{{props.msg}}</h1>
    <button @click="sentBtn">点击按钮发送</button>
</template>
<script setup>
import {defineProps,defineEmits} from "vue"
//defineProps：子接收参数，defineEmits：子接收函数
//父传子
const props= defineProps({
    msg:String
})
//子传父
const emit = defineEmits(["sendParents","sentRoots"]);
function sentBtn(){
    emit("sendParents",{msg:"我已发送消息"})
}

//异步同步的操作
// let result = await axios.get("http://api.cpengx.cn/finance/api");
// console.log(result);

</script>
<style scoped>

</style>