vue3 Bate setup属性介绍

对于vue3，在上篇做了一个简单基本的介绍，没有观看的可以点击：vue3简单了解，vue3的好处就不多说了，此篇是介绍vue3一些基本的属性和组件用途。

1). Setup

了解setup配置项，vue3中着重强调了setup是怎么用如何用，setup主要有俩个参数，props，context,其中第二个参数是 context。context 是一个普通的 JavaScript 对象，它暴露三个组件的 property，attrs，slots，emit,这也对我们后面操作很有帮助。

~1.Props的使用

props可以说是针对父子组件传值时用，用法上大径相同，取值方面略有不同。

//父组件
<About :name='name'></About>  //引入子组件

import About from './About.vue'
import {ref} from 'vue'  //响应式声明，ref是声明基本数据类型
export default {
  components:{
    About
  },
  setup(){
    const name = ref('Hello Vue3!!')  //声明变量时，用ref包裹

    return {  //必须return ！！！
      name  
    }
  }
}

//子组件
<template>
  <div class="about">
    <h1>{{ name }}</h1>
  </div>
</template>

<script>
import { toRefs } from "vue";   //解构props传过来的值
export default {
  props: {       //必须得写接收的属性，大致跟vue2相同
    name: String,
  },
  setup(props) {
    console.log(props);  //Proxy {name: "Hello Vue3!!"}
    const { name } = toRefs(props);  //解构name
    return {
      name,
    };
  },
};
</script>

image

~2.context的使用

context是一个普通的 JavaScript 对象，也就是说，它不是响应式的，这意味着你可以安全地对 context 使用 ES6 解构。

setup(props, context)
                ↓↓
setup(props, { attrs, slots, emit })

第一个是attrs

首先说下attrs和props区别，attrs算是props的加强版：
1、props 要先声明才能取值，attrs 不用先声明
2、props 声明过的属性，attrs 里不会再出现
3、props 不包含事件，attrs 包含
4、props 支持 string 以外的类型，attrs 只有 string 类型
想了解更多props,attrs区别

//父组件
<About :name="name" @click="dome1" @change="dome1" @mousedown="dome1"></About>

setup(props, { attrs, slots, emit }) {
    const name = ref("Hello Vue3!!");

    const dome1 = () => {
      console.log('dome1');
    }

    return {
      name,
      dome1
    };
  },

//子组件
setup(props, { attrs, slots, emit }) {
    console.log(props);
    console.log(attrs);
 },

image

从上图我们可以看出，attrs不会打印props一样的属性，但是attrs可以打印方法，这样方便我们定义方法时，可以直接使用,attrs更为方便

第二个是slots

slots是对于插槽的变更，可以获取到组件之间的值。

//父组件
<About>Hello World!!!</About>

//子组件
<script>
import { h } from "vue";   //引入h配置
export default {
  props: {
    name: String,
  },
  setup(props, { attrs, slots, emit }) {
    
    console.log(slots); //Proxy {default: ƒ, _: 1, __vInternal: 1}
    
    return () => h('h1',{'class':'h1'},slots.default())  //用h来取到里面的值，并且可以设置样式类名
  },
};
</script>

<style lang="scss">
  .h1{
    background: red;
  }
</style>

这样用的话有个坏处，就是只能return这个h配置，不能在setup里面做任何处理了，这块如果有知道的，感谢留言！！！

第三个是emit

emit跟vue2用法一样，只不过vue3中emit是暴露出来的，可以直接使用

//子组件
<button @click="emits">点击传值</button>

const emits = () => {
      emit("listVal", { name: "Vue3"});
 };

//父组件
<About @listVal='listVal'>Hello World!!!</About>

setup(props, { attrs, slots, emit }) {
    
    const listVal = (val) => {
      console.log(val);
    }

    return {
      listVal
    };
  },

以上是对vue3 setup中一些属性的理解，还没有写完，等待更新，谢谢！