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};
     }
    }
  • 相关阅读:
    win10 UWP button
    内网分享资源
    内网分享资源
    CF724F Uniformly Branched Trees
    win10 UWP FlipView
    win10 UWP FlipView
    win10 UWP FlipView
    搭建阿里云 centos mysql tomcat jdk
    搭建阿里云 centos mysql tomcat jdk
    win10 UWP 申请微软开发者
  • 原文地址:https://www.cnblogs.com/maycpou/p/14978308.html
Copyright © 2011-2022 走看看