vue3笔记---setup

一.创建vue3的命令

npm init vite-app vue3_demo

二.核心语法

1.setup函数

大部分代码都写在setup函数中，setup返回变量，函数，可以在模板中使用

template标签内不再限制必须要有根标签了

<template>
  <div>{
   
   { msg }}</div>
  <button @click="sayHi">打招呼</button>
</template>

<script>
export default {
  setup() {
    const msg = 11;
    const sayHi = () => {
      console.log("hello vue3");
    };
    return {
      msg,
      sayHi
    };
  },
};
</script>

<style>
</style>

2.注意点：（1）vue2.x配置项中可以访问setup返回的变量函数，但是setup访问不到vue2.x的配置项，因为setup函数执行的比beforeCreate执行的要早，setup中没有this

3.参数配置

形参1 是props，用于读取父子通信的数据

形参2 是context,叫做上下文对象，提供了很多属性

子组件代码

<template>
  <div class="child">
    <h3>子组件===={
   
   { title }}</h3>
    <slot></slot>
    <button @click="$emit('sayHi', 1000)">向父组件打招呼</button>
    <button @click="sayToF">向父组件打招呼</button>
  </div>
</template>

<script>
export default {
  name: "child",
  props: ["title"],
  //   形参1 是props，用于读取父子通信的数据
  //   形参2 是context,叫做上下文对象，提供了很多属性

  setup(props, context) {
    // 在setup中使用props中的数据
    console.log(props); //{title: '你好啊vue3'}
    const sayToF = () => {
        console.log(context) // attrs emit expose slots
        console.log(context.attrs)
        // attr属性类似vue2.x里面的$attrs,指没有被props收录的属性
       console.log(context.slots)
       // slots属性就是插槽内容
        context.emit('sayHi', 2000)
    };
    return {
        sayToF
    };
  },
};
</script>

<style>
.child {
  background-color: #eee;
}
</style>

父组件代码

<template>
  <h2>父组件</h2>
  <hr />
  <Child title="你好啊vue3" a="111" b="222" @sayHi="sayhi">
    <div>hello呀</div>
  </Child>
</template>

<script>
import Child from "./components/child.vue";
export default {
  name: "father",
  components: {
    Child,
  },
  setup() {
    const sayhi = (a) => {
      console.log("收到了子组件的招呼",a);
    };
    return {
      sayhi,
    };
  },
};
</script>

<style>
</style>

猜你喜欢