• Vue3:基础语法

    父子组件生命周期执行顺序

    初始化时

    父组件-onBeforeMount
    子组件-onBeforeMount
    子组件-onMounted
    父组件-onMounted

    在这里插入图片描述

    子组件更新时

    子组件-onBeforeUpdate
    子组件-onUpdated

    在这里插入图片描述

    父组件更新时-未影响子组件时

    父组件-onBeforeUpdate
    父组件-onUpdated

    在这里插入图片描述

    父组件更新时-影响子组件

    父组件-onBeforeUpdate
    子组件-onBeforeUpdate
    子组件-onUpdated
    父组件-onUpdated

    在这里插入图片描述

    组件销毁时

    父组件-onBeforeUnmount
    子组件-onBeforeUnmount
    子组件-onUnmounted
    父组件-onUnmounted

    在这里插入图片描述

    data定义及事件写法

    <template>
  <div>HelloWorld</div>
  <p>{{ state.title }}</p>
  <button @click="changeTitle">change Title</button>
</template>

    • 1
    • 2
    • 3
    • 4
    • 5
    export default defineComponent({
  name: "AddForm",
  setup(props) {
    console.log("props", props);
    // 标题
    let state = reactive({
      title: `I'M Chilren`,
    });
    const changeTitle = () => {
      console.log("changeTitle");
      state.title = "Chilren Two";
    };
    return {
      state,
      changeTitle,
    };
  },
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    在这里插入图片描述

    子组件AddForm.vue

    <template>
  <div>HelloWorld</div>
  <p>{{ state.title }}</p>
  <button @click="changeTitle">change Title</button>
</template>
<script lang="ts">
import {
  defineComponent,
  reactive,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";
export default defineComponent({
  name: "AddForm",
  setup(props) {
    console.log("props", props);
    // 标题
    let state = reactive({
      title: `I'M Chilren`,
    });
    onBeforeMount(() => {
      console.log("AddForm-onBeforeMount-");
    });
    onMounted(() => {
      console.log("AddForm-onMounted-");
    });
    //  DOM即将更新
    onBeforeUpdate(() => {
      console.log("AddForm-onBeforeUpdate-");
    });
    //  DOM更新完毕
    onUpdated(() => {
      console.log("AddForm-onUpdated-");
    });
    //  即将销毁
    onBeforeUnmount(() => {
      console.log("AddForm-onBeforeUnmount-");
    });
    // 销毁完毕
    onUnmounted(() => {
      console.log("AddForm-onUnmounted-");
    });

    const changeTitle = () => {
      console.log("changeTitle");
      state.title = "Chilren Two";
    };
    return {
      state,
      changeTitle,
    };
  },
});
</script>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59

    父组件AboutPage.vue

    <template>
  <div class="about">
    <h1>This is an about page {{ state.title }}</h1>
    <button @click="changeTitle">change About Title</button>
    <AddForm :title="state.title" />
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  reactive,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";
import AddForm from "../components/AddForm/index.vue";
export default defineComponent({
  name: "AboutPage",
  components: {
    AddForm,
  },
  setup(props) {
    console.log("AboutPage", props);
    let state = reactive({
      title: "About",
    });
    onBeforeMount(() => {
      console.log("AboutPage-onBeforeMount-Parent");
    });
    onMounted(() => {
      console.log("AboutPage-onMounted-Parent");
    });
    //  DOM即将更新
    onBeforeUpdate(() => {
      console.log("AboutPage-onBeforeUpdate-Parent");
    });
    //  DOM更新完毕
    onUpdated(() => {
      console.log("AboutPage-onUpdated-Parent");
    });
    //  即将销毁
    onBeforeUnmount(() => {
      console.log("AboutPage-onBeforeUnmount-Parent");
    });
    // 销毁完毕
    onUnmounted(() => {
      console.log("AboutPage-onUnmounted-Parent");
    });
    const changeTitle = () => {
      console.log("changeTitle-About");
      state.title = "Chilren Two";
    };
    return {
      state,
      changeTitle,
    };
  },
});
</script>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63

    父子组件间的通信

    父组件给子组件传递数据（Props)

    在这里插入图片描述

    在这里插入图片描述

    子组件给父组件传递数据(emit)

    父组件
    在这里插入图片描述

    在这里插入图片描述
    子组件
    在这里插入图片描述

    子组件

    <template>
  <div>HelloWorld</div>
  <p>{{ state.title }}</p>
  <button @click="changeTitle">change Title</button>
</template>
<script lang="ts">
import {
  defineComponent,
  reactive,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";
export default defineComponent({
  name: "AddForm",
  props: {
    num: String,
    title: String,
  },
  setup(props, context) {
    console.log("props", props, context);
    // 标题
    let state = reactive({
      title: `I'M Chilren`,
    });
    onBeforeMount(() => {
      console.log("AddForm-onBeforeMount-");
    });
    onMounted(() => {
      console.log("AddForm-onMounted-");
    });
    //  DOM即将更新
    onBeforeUpdate(() => {
      console.log("AddForm-onBeforeUpdate-");
    });
    //  DOM更新完毕
    onUpdated(() => {
      console.log("AddForm-onUpdated-");
    });
    //  即将销毁
    onBeforeUnmount(() => {
      console.log("AddForm-onBeforeUnmount-");
    });
    // 销毁完毕
    onUnmounted(() => {
      console.log("AddForm-onUnmounted-");
    });

    const changeTitle = () => {
      console.log("changeTitle");
      state.title = "Chilren Two";
      context.emit("getSubTitle", "Chilren Two");
    };
    return {
      state,
      changeTitle,
    };
  },
});
</script>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64

    父组件

    <template>
  <div class="about">
    <h1>This is an about page {{ state.title }}</h1>
    <button @click="changeTitle">change About Title</button>
    <AddForm num="1" :title="state.title" @getSubTitle="getSubTitle" />
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  reactive,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";
import AddForm from "../components/AddForm/index.vue";
export default defineComponent({
  name: "AboutPage",
  components: {
    AddForm,
  },
  setup(props) {
    console.log("AboutPage", props);
    let state = reactive({
      title: "About",
    });
    onBeforeMount(() => {
      console.log("AboutPage-onBeforeMount-Parent");
    });
    onMounted(() => {
      console.log("AboutPage-onMounted-Parent");
    });
    //  DOM即将更新
    onBeforeUpdate(() => {
      console.log("AboutPage-onBeforeUpdate-Parent");
    });
    //  DOM更新完毕
    onUpdated(() => {
      console.log("AboutPage-onUpdated-Parent");
    });
    //  即将销毁
    onBeforeUnmount(() => {
      console.log("AboutPage-onBeforeUnmount-Parent");
    });
    // 销毁完毕
    onUnmounted(() => {
      console.log("AboutPage-onUnmounted-Parent");
    });
    const changeTitle = () => {
      console.log("changeTitle-About");
      state.title = "Chilren Two";
    };
    const getSubTitle = (value: string) => {
      console.log("getSubTitle", value);
    };
    return {
      state,
      changeTitle,
      getSubTitle,
    };
  },
});
</script>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
  • 相关阅读:
    分享一个基于python+爬虫的豆瓣电影数据可视化分析系统源码
    uni-app - 面包屑导航组件，支持自定义分隔符，点击可跳转对应页面（全端兼容 H5 APP 小程序，组件代码干净整洁无BUG）
    vmware安装ubuntu22.04无法和window主机拷贝文件处理
    TCP详解
    MySQL优化（三）回表详解
    python爬虫动态爬取需点击事件或下一步才可获取的内容
    网络原理之TCP/IP
    Docker简介与安装
    【毕业设计】 python小游戏设计 - 走迷宫游戏设计与实现
    QT（9.4）tcp通信，数据库，opencv，
  • 原文地址：https://blog.csdn.net/weixin_40119412/article/details/125493184