乱色欧美激惰,精品久久综合1区2区3区激情,亚洲国产成人爱av在线播放

首頁 > 博客列表 > vue組件注冊及通信方式

博主信息

博文 34

粉絲 0

評論 0

訪問量 28644

專題推薦

更多>

組件注冊

<div id="app">
  <!-- vue指令的本質是什么? 自定義屬性 -->
  <!-- <p v-text="'Hello World'"></p> -->
  <!-- vue組件的本質是什么? 自定義標簽 -->
  <!-- <hello-world></hello-world> -->
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>
<template id="counter">
  <button @click="count++">點贊: {{count}}</button>
</template>
<script>
  //   const app = Vue.createApp();
  // 注冊組件有二種方式
  // 1. 全局組件: 注冊在vue實例上
  //   app.component('button-counter', {
  //     template: '#counter',
  //     data() {
  //       return {
  //         count: 0,
  //       };
  //     },
  //   });
  // 2. 局部組件: 注冊vue實例的選項中
  const app = Vue.createApp({
    components: {
      // 可以使用規(guī)范的駝峰命名法, 不過在html中要轉為蛇形
      buttonCounter: {
        template: '#counter',
        data() {
          return {
            count: 0,
          };
        },
      },
    },
  });
  app.mount('#app');
</script>

向子組件傳參

 <div id="app">
   <!-- 使用自定義屬性將父組件參數傳入子組件中 -->
   <button-counter username="admin" email="498446472@qq.com"></
button-counter>
 </div>
 <template id="counter">
   <p>用戶名: {{username}}</p>
   <p>郵箱: {{email}}</p>
 </template>
 <script>
   const app = Vue.createApp();
   app.component('button-counter', {
     // props: 用數組接收父組件傳入的自定義屬性做為載體的參數
     props: ['username', 'email'],
     template: '#counter',
   });
   app.mount('#app');
 </script>

向父組件傳參: 監(jiān)聽子組件事件

 <body>
   <div id="app">
     <button-counter @review-count="review"></button-counter>
   </div>
   <template id="counter">
     <button @click="count++">點贊: {{count}}</button>
     <!-- 發(fā)布訂閱 -->
     <!-- $emit(自定義事件名稱, 向父組件傳遞的參數(可選)) -->
     <!-- $emit('reviewCount', this.count) -->
     <button @click="$emit('reviewCount', this.count)">評價</
button>
   </template>
   <script>
     const app = Vue.createApp({
       methods: {
         review(count) {
           console.log(count);
           if (count >= 10) alert('大家吃了嗎?');
         },
       },
     });
     app.component('button-counter', {
       template: '#counter',
       data() {
         return {
           count: 0,
         };
       },
     });
     app.mount('#app');
   </script>
 </body>

批改老師：

PHPz

批改狀態(tài)：合格

老師批語：

本博文版權歸博主所有，轉載請注明地址！如有侵權、違法，請聯(lián)系admin@php.cn舉報處理！

全部評論文明上網理性發(fā)言，請遵守新聞評論服務協(xié)議

0條評論

作者最新博文

markdown語法學習及代碼展示

2022-07-02 17:47:31

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

組件注冊

向子組件傳參

向父組件傳參: 監(jiān)聽子組件事件