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可以说是针对父子组件传值时用，用法上大径相同，取值方面略有不同。

//父组件
  //引入子组件

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

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

//子组件

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区别

//父组件


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是对于插槽的变更，可以获取到组件之间的值。

//父组件
Hello World!!!

//子组件

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

---

第三个是emit

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

//子组件
点击传值

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

//父组件
Hello World!!!

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

    return {
      listVal
    };
  },

---

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