Home > List of blog posts > 实例演示组件注册的二种方式,以及组件之间的通信方式

Blogger Information

Blog 46

fans 2

comment 0

visits 19139

Special Recommendation

More>

Related recommendations

组件

<!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@next"></script>
</head>
<body>
    <div class="app">
        <!-- vue 指令  本质 是  自定义属性 -->
        <!-- <button-counter></button-counter>   必须这种格式 -->
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div> 
    <template id="counter"  class="uo">
        <button @click="count++">点赞: {{count}}</button>
      </template>
   <hr>
    <script>
     const app = Vue.createApp();
    // 注册组件两种方式 
    // 1、全局组件   注册在vue实例上
    app.component('button-counter', {
    // 可以简写  将 <button @click ="count++">点赞：{{count}}</button>  放到html 的body  实现代码复用
                    //  不能用 class   只能用  id
    template: '#counter',
    // template: '.uo',
     data() {
        return {
            count:0,
        }
     },
   }).mount('.app');
    </script>
</body>
</html>

组件

<!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@next"></script>
</head>
<body>
    <div class="app">
        <!-- vue 指令  本质 是  自定义属性 -->
        <!-- <button-counter></button-counter>   必须这种格式 -->
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div> 
    <template id="counter"  class="uo">
        <button @click="count++">点赞: {{count}}</button>
      </template>
   <hr>
    <script>
      // 2、局部组件   注册在vue实例的选项中
      const app = Vue.createApp({
        components: {
          // 可以使用规范的驼峰命名法, 不过在html中要转为蛇形
        //   button-counter  (不能用)      buttonCounter
        buttonCounter : {
            template: '#counter',
            data() {
              return {
                count: 0,
              };
            },
          },
        },
      });
      app.mount('.app');
    </script>
</body>
</html>

父向子组件传参

<!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@next"></script>
</head>
<body>
    <div class="app">
        <!-- vue 指令  本质 是  自定义属性 -->
        <!-- <button-counter></button-counter>   必须这种格式 -->
    <!-- 使用自定义属性将父组 件参数传入到子组件中 -->
        <button-counter   username = 'admin'   email = '123@qq.com'></button-counter>
    </div> 
    <template id="counter"  class="uo">
    <p>用户：{{username}}</p>    
    <p>邮箱：{{email}}</p>    
    </template>
<script>
     const app = Vue.createApp();
     app.component('button-counter', {
          template: '#counter',
        // props  属性  用数组来而棘手父组件传入的自定义属性作为载体的参数
        props:['username','email'],
      });
      app.mount('.app');
</script>
</body>
</html>

子向父组件传参：监听了组件事件

<!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@next"></script>
</head>
<body>
    <div class="app">
        <!-- vue 指令  本质 是  自定义属性 -->
        <!-- <button-counter></button-counter>   必须这种格式 -->
    <!-- 使用自定义属性将父组 件参数传入到子组件中 -->
        <button-counter  @review-count="review"></button-counter>
    </div> 
    <template id="counter"  class="uo">
    <button @click="count++">点赞: {{count}}</button>
    <!-- 基础发布订阅
    $emit（)  固定写法
     $emit（自定义事件的名称，像父组件传递的参数（可选）) 
    -->
    <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>
</html>

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

markdownm语法

2022-07-02 10:53:43

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

组件

组件

父向子组件传参

子向父组件传参：监听了组件事件