[JavaScript知识库]vue3新功能测试

vue3新功能测试

axios请求，emit传值等

//父组件
<template>
   <p> 注册界面</p>
   <son size='small' count='' url  disabled @url='url' />
  <p> {{url1.state1}}</p>
  <p>{{url1.param1}}</p>
 
</template>

<script>

import  son from './../components/son.vue'
import {reactive,h,toRefs} from 'vue'


export default {
    components:{
        son
    },
    setup(){
        
        //在vue3中常量不能再次赋值
        // const state1 = ref(0)
        const url1 = reactive({param1:'',state1:'0'})
        function url(param){
            console.log('父组件拿到的emit值',param)
            url1.param1 = param.url
            if(url1.param1!=''){
                url1.state1='1'
                const data = toRefs(reactive({param1:'',state1:'0'}))
                console.log(data)
                console.log(data.param1.value)
               return () => h("div", ["DOM元素为函数："]);
            }
            
        }
        return{
            url,
            url1
        }
    }
}
</script>

<style>

</style>

//子组件
<template>
  <p>子页面</p>
</template>
<script>
import { h, ref, reactive, onBeforeMount } from "vue";
import { tGet } from "../axios/api";
export default {
  props: {
    size: String,
    count: Number,
  },
  setup(props, {emit}) {
    const readersNumber = ref(0);
    const book = reactive({ title: "Vue 3 Guide" });
    console.log(props.size);
    console.log("props:", {
      ...props,
    });

    // console.log("attrs:", {
    //   ...context.attrs,
    // });
    onBeforeMount(async () => {
      //调用方法
      let res = await tGet("/wx_login");
      console.log(res.config.baseURL + res.config.url);
       emit('url', {
        url: res.config.baseURL + res.config.url,
      })
    })
    // Please note that we need to explicitly expose ref value here
    return () => h("div", ["DOM元素为函数：", readersNumber.value, book.title]);
    //this
    //在 setup() 内部，this 不会是该活跃实例的引用，因为 setup() 是在解析其它组件选项之前被调用的，所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。
    //这在和其它选项式 API 一起使用 setup() 时可能会导致混淆。
  },
};
</script>

<style>
</style>