Vue3 ( 元件 / components ) -2

1.元件注册方法有三，注册後才能使用

(1)全域注册
方法1.

          <alert></alert>

         // 1.串接跟元件，元件注册，名称为alert
            .component("alert", {
              data() {
                return {
                  text: "内部文字",
                };
              },
              // 元件样板
              template: `<div class="alert alert-primary" role="alert">
              {{ text }}
            </div>`,
            });

方法2.

            <alert2></alert2>

            // 2.元件注册，名称为alert2
            app.component("alert2", {
              data() {
                return {
                  text: "元件 2",
                };
              },

              // 元件样板
              template: `<div class="alert alert-primary" role="alert">
              {{ text }}
            </div>`,
            });

(2)区域注册
方法1.

            const alert3 = {
              data() {
                return {
                  text: "元件 3",
                };
              },
              // 元件样板
              template: `<div class="alert alert-primary" role="alert">
              {{ text }}
            </div>`,
            };

根元件增加components

             const app = Vue.createApp({
              data() {
                return {
                  text: "外部元件文字",
                };
              },
              // 3.显示-方法1 区域注册
              components: {
                alert3,
              },

            <alert3></alert3>

方法2.放在元件2下面，便於管理

            const alert3 = {
              data() {
                return {
                  text: "元件 3",
                };
              },
              // 元件样板
              template: `<div class="alert alert-primary" role="alert">
              {{ text }}
            </div>`,
            };

            app.component("alert2", {
              data() {
                return {
                  text: "元件 2",
                };
              },

              // 3.显示-方法2 区域注册
              components: {
                alert3,
              },

              // 元件样板
              template: `<div class="alert alert-primary" role="alert">
              {{ text }}

              // 3.显示-方法2
              <alert3></alert3>

            </div>`,
            });

(3)模组化

component-alert.js

export default{
    data() {
      return {
        text: "外部汇入的元件",
      };
    },
    // 元件样板
    template: `<div class="alert alert-primary" role="alert">
    {{ text }}
  </div>`,
};

            <alert4></alert4>

引入

            import alert4 from "./alert-component.js";

到跟元素注册

            const app = Vue.createApp({
              data() {
                return {
                  text: "外部元件文字",
                };
              },
              components: {
                // 4.显示 注册
                alert4,
              },

2.元件样板

(1)template

            <alert></alert>

            app.component("alert", {
              template: `<div class="alert alert-primary" role="alert">
               范例一
               </div>`,
            });

(2)x-template

    <script type="text/x-template" id="alert-template">
      <!-- template格式 -->
      <div class="alert alert-primary" role="alert">
        x-template 所建立的元件
        </div>
    </script>

            <alert2></alert2>

            app.component("alert2", {
              // 绑id
              template: "#alert-template",
            });

3.运用

v-is

字串

            app.component("alert", {
              template: `<div class="alert alert-primary" role="alert">
               范例一
               </div>`,
            });

            <div v-is="'alert'"></div>

变数

              data() {
                return {
                  array: [1, 2, 3],
                  // "alert"元件名称，仓库
                  componentName: "alert",
                };
              },

             <input type="text" v-model="componentName" />  //抓

             <div v-is="componentName"></div>  //显示

4.Props 传送资料 (外传内)

命名记得不要用到大写，html标签不吃小驼峰

动态资源
技巧：前内、後外

 <photo v-bind:url="imgUrl"></photo>

前内 url

            app.component("photo", {
              // 1.Props 静态资料 定义 props属性(定义图片名称)
              // 2.动态资源 定义 props属性(定义图片名称)後
              props: ["url"],
              template: `<img :src="url" class="img-thumbnail" alt>`,
            });

後外 imgUrl

              data() {
                return {
                  imgUrl:
                    "https://images.unsplash.com/photo-1605784401368-5af1d9d6c4dc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80",
                };
              },

5.Props 型别验证 要用{}

            <props-validation :prop-a="fun"> </props-validation>
 
              data() {
                return {
                  fun: () => {
                    return "a";
                  },
                };
              },

                app.component("props-validation", {
                props: {
                propA: Function,
                // propA: String,  //会跳警告但不会影响运作
                }

6.Emit 内传外 or (传递)触发事件

$emit连接器

(传递)触发事件

内资料传外

7.Emit传值 & 验证

1.内向外传值，可以直接写在html内(减略前述methods)
1-1.追踪 emits: ["add"]

              data() {
                return {
                  num: 1,
                };
              },

              // add事件追踪[]，并且可验证值{}
              emits: ["add"],

      template: `

      <button type="button" @click="num++">调整 num 的值</button>  
      <button 
      v-on:click="$emit('add',num)"   //连接add,传num出去
      type="button">add</button>`,

            });

2.验证 emits:{}

            app.component("button-counter2", {
              // add事件追踪[]，并且可验证值{}
              emits: {

                add: (num) => {
                  if (typeof num != "number") {
                    console.warn("add 事件参数型别须为number");
                  }
                  return typeof num === "number"; //1
                },
              },

              template: `
      3-1 点击按钮，$emit先执行内部add: (num) => 传入值 1 并 连接@add及传入值 1 
      <br>
      <button type="button" @click="$emit('add', '1')">Emit 验证是否为数值</button>
    `,
      });

8.Slot 元件插槽

制作元件

            app.component("card", {
              template:

            <slot>
            <p style="color: red">这是预设值</p>
            </slot>

html替换 template /slot 内的内容

            <card>
              <p style="color: red">此处由外层定义YOOOOOO</p>
            </card>

9.Slot props

将内部的部分data资料给Slot，让外部得以抓取


(1)取出元件的值使用(一个)

(2)取出元件的值使用(多个)

10.Mitt套件 跨元件传递

不只Vue可使用，有类似需求都可以装此套件
https://github.com/developit/mitt

11.v-for必加key

v-for="i in array" :key="i" 

SPA 单页式应用程序

props > 接收变数( data内 + v-bind )

emits > function接收 (v-on)

更改元件样式

1. 将别人的元件新增 class='checkbox-text-color'

2. F12查看该样式 class v-label

.checkbox-text-color{
  .v-label{
    color:red;
    
  }
}