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.jsexport 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;      }}