Vue组件及通信方式

一. 声明组件与子组件,以及他们之间的通信方式

一）. 父-子：自定义属性

1.代码

 <body>
    <!-- 挂载点 -->
    <div id="app"></div>
    <!-- 父组件的模板代码 -->
    <template id="parent">
      <counter username="admin" email="496542445@qq.com" />
    </template>
    <!-- 子组件的模板代码 -->
    <template id="child">
      <p>UserName:{{username}}</p>
      <p>UserEmail:{{email}}</p>
    </template>
    <script>
      const app = Vue.createApp({
        // 父组件
        template: `#parent`,
      });
      app.component("counter", {
        // 接受父组件的传过来的参数
        props: ["username", "email"],
        template: `#child`,
      });
      const vm = app.mount("#app");
    </script>
  </body>

2.实现效果图

二）.子-父：自定义事件

1.代码

  <body>
    <!-- 挂载点 -->
    <div id="app">
      <counter @review="review" />
    </div>
    <template id="counter">
      <button @click="count++">点赞：+{{count}}</button>
      <button @click="review()">评论</button>
    </template>
    <script>
      const app = Vue.createApp({
        methods: {
          review(count) {
            console.log(count);
          },
        },
      });
      app.component("counter", {
        template: `#counter`,
        data() {
          return {
            count: 0,
          };
        },
        methods: {
          review() {
            this.$emit("review", this.count);
          },
        },
      });
      const vm = app.mount("#app");
      // 1. 父-子：自定义属性
      // 2.子-父：自定义事件
    </script>
  </body>

2.实现的效果图

批改老师：

PHPz

批改状态：合格

老师批语：总结的不错, 继续加油

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

前端开发的环境搭建及markdown的语法简介（第一课作业）

2022-10-16 21:05:01