Vue3-03基础

本节：依旧是明歌的视频。

这部分主要是组合式API vue3的写法。

一、自定义组件emit事件（子传父）  this.$emit("自定义方法名");

直接在方法写表达式，比较快，直接把变量设置成false 

 二、slot插槽（父传子）

 这样写只能实现内容显示，如果子组件需要存储变量，进行更深的逻辑，则需要prop来接受父页面传过来的变量。 

 子组件也可以在插槽传值给父组件。

 效果：

三、使用v-model，子组件改变父组件的内容。

 PS：键盘监听，如果按回车，子件就修改内容，按esc就消失子件。

 我想要按下回车之后，不只是修改，还同时让子件消失。我写了个变量放在修改的方法里面，一开始为真，然后写监听事件，那个变量一发生变化，就调用让组件消失的方法。

 四、组合式API，也就是vue3

我们通过组合式 API 解决了两个问题。

1.我们让组件拥有了更加良好的代码组织结构
2.我们让相同的代码逻辑在不同的组件中进行了完整的复用

（不用写this了）

（1）ref修改变量，本质和获取dom，修改id差不多，只是写法不同 。变量是 变量名.value ，数组是通过下标来取值。

 因为组合式API写法不一样，所以(2)生命周期的写法也不一样。

1.首先引入   2.写法的不同

 (3)watch和computed的写法

 1.首先引入   2.写法的不同

（4）props和emit还有方法的写法。

 （5）子组件的引入

ps:新建完还遇到一个问题就是，怎么调样式都不正确，然后到处注释，其实是最简单的，就是我找到了整个项目唯一的style代码，全部注释了就可以了

以上所有内容的代码

1.父页面

<template>
  <div>
    <div @click="clickMe1">{{ text1.name }}</div>

    <div>
      {{ "今天天气是：" + weather + "现在时间是" + new Date().toISOString() }}
    </div>
    <hr>
    <div>{{ todata }}</div>
    <button @click="showme = !showme"> 点击出现招呼</button>

    <son-one v-model="weather" content="你是山间的清泉，你是夏天傍晚的微风" @closeOne="showme = false" v-if="showme">
      <template #content="contentindex">
        <div>{{ contentindex.meimei }}</div>
        <div>第一百次心动是：{{ weather }}</div>
      </template>

    </son-one>
  </div>
</template>


<script>
import sonOne from './components/son.vue'
export default {
  components: { sonOne },
  data() {

    return {

      weather: "雨天",
      showme: false,
      text1: {
        name: "张楚梅"
      }
    };
  },
  methods: {
    clickMe1() {

      this.text1.name = "袁楚天，天天"
    },
  },
  computed: {
    todata() {
      return "今天天气是：" + this.weather + ",现在时间是" + new Date().toISOString()
    },
  },
  watch: {
    text1: {
      handler: function (newVal, oldVal) {
        console.log(newVal, oldVal);

      },
      deep: true
    },
    weather: {
      handler: function (newVal, oldVal) {
        console.log(newVal, oldVal);
      },
      deep: true
    }
  }

}
</script>

<style scoped>

</style>

子组件：

<template>
    <div style="background-color: pink;width: 400px;height: 400px;">

        <div>早上好，公主</div>
        <div>
            {{ content }}
            <slot meimei="梅梅" name="content"></slot>
        </div>
        <div><input v-model="res" @keyup.enter="hello" @keyup.esc="cancel"></div>
        <button @click="hello">你好哇</button>
        <button @click="cancel">再见</button>
    </div>

</template>
<script>
export default {
    data() {
        return {
            res: "",
            watch1: false,
        }
    },
    watch: {
        watch1:
        {
            handler: function (newVal, oldVal) {
                console.log(newVal, oldVal);
                this.cancel();
            },
            deep: true
        }
    },
    methods: {
        hello() {
            this.$emit("update:model-value", this.res);
            this.$emit("close", { name: "小天" });
            this.watch1 = true;
        },
        cancel() {
            console.log(this.content)
            this.$emit("closeOne");
        },
    },
    props: {
        content: {
            type: String,
            default: "",
        },
    },
    modelValue: {
        type: String,
        default: "",
    },

}
</script>