zoukankan      html  css  js  c++  java
  • vue(32)vue中CompositionAPI中setup中this指向以及属性事件插槽等的使用

    在没有使用setup前的写法中,在methods的方法或者mounted的方法中我们可以用this来获取data数据调用一些方法之类的,this指向当前这个组件。

    但是在setup中this是undefined的,因为setup方法的调用时机是在boforeCreated方法之前,也就是说在组件还没有创建之前就调用了setup方法,所以在setup中肯定不存在一个指向当前组件的this。

    没有this那么怎么使用父组件传入的属性或者调用父组件的方法,就需要用到setup方法的参数:

    如vue3默认生成的HelloWorld组件用setup获取Home父组件的属性:

    <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
      </div>
    </template>

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

    export default {
     name:'Hello',
     props:{
       msg:{
         type:String
       }
     },
     //第一个参数props中可以获取父组件传入的参数,
     //第二个参数中有很多内容,context.attrs可以获取父组件的属性(没有被子组件接收的那部分,即props中没有声明的部分)
     //context.slots可以获取组件中slot部分的内容
     //context.parent可以获取父组件对象
     //context.root可以获取根组件对象
     //context.emit用于调用父组件的方法
     //context.refs获取组件上面的元素对象
     setup(props,context){
       //获取父组件传入的属性
       console.log(props.msg);
       console.log(this);
       const data = reactive({

        });
        return{data};
     }
    }
  • 相关阅读:
    HDU 1290 献给杭电五十周年校庆的礼物(面分割空间 求得到的最大空间数目)
    2018年暑假ACM个人训练题6 解题报告
    HDU 2096 小明A+B(%的运用)
    HDU 2097 sky数 (进制转化)
    布局(codevs 1242)
    Remmarguts’ Date(poj 2449)
    魔法猪学院(codevs 1835)
    统计单词个数(codevs 1040)
    小L 的二叉树(洛谷 U4727)
    Shortest Prefixes(poj 2001)
  • 原文地址:https://www.cnblogs.com/maycpou/p/14978308.html
Copyright © 2011-2022 走看看