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

代码部分

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>声明组件与子组件,以及他们之间的通信方式</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <!-- 挂载点 -->
    <div id="app">
      <!-- 组件挂载 -->
      <greeting />
    </div>
  </body>
  <script>
    // 应用实例
    const app = Vue.createApp({});
    app.component("greeting", {
      // html模版
      template: `
        <h2>Hello, {{uname}}</h2>
        <button @click='setLike'>点赞 + {{count}}</button>
        <!-- 命名规则: 小驼 -> 肉串 -->
        <my-award v-if='count >=10' />        
        `,
      // 数据
      data() {
        return {
          uname: "李老师",
          count: 0,
        };
      },
      // 方法
      methods: {
        setLike() {
          this.count++;
        },
      },
      // 声明子组件(复数属性)
      components: {
        // 奖励组件
        myAward: {
          // 只要是组件，可以写模版
          template: `<p>实在太受欢迎了`,
          data() {
            return {};
          },
          components: {},
        },
      },
    });
    // 根组件实例 (vue应用与挂载点绑定)
    const vm = app.mount("#app");
  </script>
</html>

代码部分

相关文章