TP vue组合api-绑定事件\组件\通信\路由(五)

发布于：2022-05-15 13:13:16  栏目：技术文档

setup() 函数是vue3中专门新增的方法，可以理解为 Composition Api 的入口

<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/test?id=123&name=zolo">TestContent</router-link>
    </nav>
    <router-view />
    <div>{{ data.num }}</div>
    <div>{{ data.name }}</div>
    <button @click="add">addMe</button>
    <button @click="resetnum">resetnum</button>
    <p>{{ zolo }}</p>
    <div>
      <test-com msg="我是父组件传过来的" title="我是title,看看能不能接收">
        <button>我是插槽数据1</button>
        <button>我是插槽数据2</button>
      </test-com>
    </div>
  </div>
</template>
<script>
// $route 获取当前路由信息
// $router 获取当前路由器，分发器：可以进行页面跳转
import { reactive, computed, ref, toRefs, readonly, isRef, watch,onBeforeMount, onMounted } from "vue";
import testComVue from "./components/testCom.vue";
import { useRoute, useRouter } from "vue-router";
export default {
  components: {
    testCom: testComVue,
  },
  setup() {
    let route = useRoute();
    let router = useRouter();
    console.log(route.params);
    console.log(route.query);
    router.push({
      path:'/about',
      query:{
        name:'test',
        id:888,
      }
    });
    onBeforeMount(()=>{
      console.log(onBeforeMount);
    });
    onMounted(()=>{
      console.log(onMounted);
    });
    let zolo = ref(999);
    let data = reactive({
      num: 100,
      name: "hellozolo",
    });
    // let readdata = readonly(data);
    // readdata.num=999999;
    console.log("是否是可响应数据" + isRef(zolo));
    console.log("是否是可响应数据" + isRef(data));
    function add() {
      zolo.value--;
      data.num++;
      console.log(data.num);
    }
    function resetnum() {
      data.num = 100;
      zolo.value = 999;
    }
    //监听数据 新值，老值
    // watch(zolo, (a, b) => {
    //   console.log(zolo);
    //   console.log(a);
    //   console.log(b);
    // });
    watch([zolo,()=>data.num], ([a1,b1],[a2,b2]) => {
      console.log('zolo-new:'+a1);
      console.log('zolo-old:'+a2);
      console.log('data-new:');
      console.log(b1);
      console.log('data-old:');
      console.log(b2);
    });
    return {
      zolo,
      data,
      add,
      resetnum,
    };
  },
};
</script>

相关推荐