• Vue 忽略自定义标签名&插件开发&组件数据传递和共享—＞父传子

    忽略自定义标签名
    通过全局配置 app.config.compilerOptions.isCustomElement 设置需要被忽略
    的自定义标签
    • 取值：(tag: string) => boolean
    • 用法：
    const app = Vue . createApp ({ /* ... */ }). mount ( "#app" );
    app . config . compilerOptions . isCustomElement = tag =>
    tag . startsWith ( 'ion-' );
    须使 Vue 忽略在 Vue 之外的自定义元素 (e.g. 使用了 Web ComponentsAPIs)。否则，它会假设你忘记注册全局组件或者拼错了组件名称，从而抛出一个关于 Unknown custom element 的警告。 
    1.   "stylesheet" href="../../assets/font/iconfont.css">
    2.     <style>
    3.         body{
    4.             padding-bottom: 800px;
    5.         }
    6.         .iconfont{
    7.             font-size: 30px;
    8.         }
    9.         icon-message,icon-set,collection{
    10.             font-family: "iconfont" !important;
    11.             font-size: 30px;
    12.         }
    13.         icon-message::before{
    14.             content: "\e77e";
    15.         }
    16.         icon-set::before{
    17.             content: "\e78e";
    18.         }
    19.         collection::before{
    20.             content: "\e60c";
    21.         }
    22.     style>
    25.     <p class="iconfont icon-email-fill">p>
    26.     <p class="iconfont">p>
    27.     <icon-message>icon-message>
    28.     
    29.     <div id="app">
    30.         <h4>渲染自定义标签指定的图标h4>
    31.         <p class="iconfont icon-email-fill">p>
    32.         <p class="iconfont">p>
    33.         <icon-message>icon-message>
    34.         <icon-set>icon-set>
    35.         <collection>collection>
    36.     div>
    37.  
    38.     <script type="module">
    39.         import { createApp } from "../../assets/vue/3.0/vue.esm-browser.js";
    40.         const customTags = ["icon-message","icon-set","collection"]
    41.  
    42.         const app = createApp({
    43.             data(){
    44.                 return {
    45.                 
    46.                 }
    47.             }
    48.         })
    49.         
    50.         // 通过扩展自定义组件标签的判断逻辑，描述那些自定义标签不是组件
    51.         app.config.compilerOptions.isCustomElement = function(tag){
    52.             // tag 参数 为程序运行时所有自定义标签的名称
    53.             console.log(tag);
    54.             // 通过返回 true 表示标签为自定义标签
    55.             // 通过返回 false 表示标签为组件标签
    56.             // return tag=="icon-message"
    57.             // return tag.startsWith("icon-")
    58.             return customTags.includes(tag);
    59.         }
    60.         
    61.         app.mount("#app")
    62.     script>

    插件开发

    为统一 Vue扩展和全局配置语法，方便代码管理维护，为项目功能分解为模块化提供操作依据, Vue提供统一的插件配置管理
    应用 API ， app.use(plugin,options)
    插件是自包含的代码，通常向 Vue 添加全局级功能。它可以是公开 install() 方法的 object 对象参数，也可以是 公开的 function 方法

     + 参数

                    - plugin : Object|Function

                                Object = { install:function(app [,options] ){} }

                                Function = function(app [,options] ){}

                        * 方法对应的第一个参数app为调用时的应用对象(createApp构建对象)

                        * options 在插件加载过程中提供额外的配置参数

    • 插件定义
    // plugins 定义
    export default {
    install : function ( app , options ){
    /*
    app: 当前安装插件的 Vue 应用程序实例对象，通过该对象可以扩展全局配置
    等相关功能
    options: 当前安装插件时提供的额外参数数据
    */
    console . log ( "app:" , app );
    console . log ( "options:" , options );
    }
    }
    // 或者
    export default function ( app , options ){
    console . log ( "app:" , app );
    console . log ( "options:" , options );
    }
    • 插件应用

    局部组件

    2.     <div id="app">
    3.  
    4.     div>
    5.  
    6.     <script type="module">
    7.         import { createApp } from "../../assets/vue/3.0/vue.esm-browser.js";
    8.         const app = createApp({
    9.             data(){
    10.                 return {
    11.                 
    12.                 }
    13.             }
    14.         })
    15.         // 插件1
    16.         let plugin1 = {
    17.             install:function(app,opt){
    18.                 console.log("插件1:",app,opt);
    19.             }
    20.         }
    21.         app.use(plugin1,"额外参数")
    22.         // 插件2
    23.         let plugin2 = function(app,opt){
    24.             console.log("插件2:",app,opt);
    25.         }
    26.         app.use(plugin2,{
    27.             name:"额外参数"
    28.         })
    29.         app.mount("#app")
    30.     script>

    全局组件

    1.  "stylesheet" href="../../assets/font/iconfont.css">
    2.     <style>
    3.         body{
    4.             padding-bottom: 800px;
    5.         }
    6.         .iconfont{
    7.             font-size: 30px;
    8.         }
    9.         icon-message,icon-set,collection{
    10.             font-family: "iconfont" !important;
    11.             font-size: 30px;
    12.         }
    13.         icon-message::before{
    14.             content: "\e77e";
    15.         }
    16.         icon-set::before{
    17.             content: "\e78e";
    18.         }
    19.         collection::before{
    20.             content: "\e60c";
    21.         }
    22.     style>
    25.     
    26.         
      {{ $ajaxBase }}
    27.         
    28.         
    29.         
    30.         
    31.         
      全局指令
    32.         
    33.         
    34.

    • 组件数据传递和共享

    页面组件关系结构， 类似于 HTML 的结构树，存在父子关系，因此组件间的数据传递共享存在 父 => 子、子 => 父和非父子关系组件数据传递

    1. 父组件向子组件数据传递

    • 技术实现：属性绑定，数据拦截
    • 详细描述：==以属性绑定的方式将传递的数据绑定在子组件标签上，在子组件对象中 以属性 props 方式进行 绑定属性的拦截==
      

    1.    .box{
    2.             margin: 10px;
    3.             border: 1px solid #999;
    4.             min-height: 100px;
    5.             padding: 10px;
    6.         }
    7.     
    10.     
    11.         
      父组件
    12.         
      msg:{{ msg }}
    13.         
    14.         
    15.         
    16.             v-bind:info="msg"
    17.             :num="num"
    18.             :arr="arr"
    19.             :user="user"
    20.             text="测试组件属性的静态绑定"
    21.             :flag="false"
    22.         >
    23.         
    24.         
    25.

    • 特殊属性处理和属性穿透

      

    1.  
    3.  
    5.     
    6.         
      父组件
    7.         
    8.         
    9.         
    10.