VueJS组件篇

程序员文章站 2022-03-09 19:44:20

...

首先介绍一下什么是组件

组件可以扩展HTML元素，封装可重用的代码。
组件是自定义元素，VueJS的编译器为它添加特殊功能。
组件也可以是原生HTML元素形式，以is特性扩展。

如何使用组件

这里我先介绍两种注册组件的方法

全局注册（所谓全局注册就是使用Vue的静态注册）

    Vue.component('my-component',{
        template:'<p>我是全局注册</p>'
    });
    new Vue({
        el:"#app",
    });

局部注册（需要写在实例中的components属性中）

  var vm = new Vue({
      el:'#app',
      components:{
          'my-component':{
              template：'<p>我是局部注册</p>'
          }
      }
  });
  new Vue({
      el:"#app",
  });

组件中的data

data必须是函数

如果不是函数，每个组件共享一个数据，会相互影响

当使用函数的时候，把数据返回，每个组件都有自己的数据

  Vue.component('my-component',{
      template:'<h1>{{ name }}</h1>'
      data(){
          return{
              name:'luoxue'
          }
      }
  })

组件的构成

组件意味着协同工作，通常父子组件会是这样的关系：组件 A 在它的模版中使用了组件 B 。它们之间必然需要相互通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。然而，在一个良好定义的接口中尽可能将父子组件解耦是很重要的。这保证了每个组件可以在相对隔离的环境中书写和理解，也大幅提高了组件的可维护性和可重用性。

在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。

prop 是父组件用来传递数据的一个自定义属性。子组件需要显式地用 props 选项声明 “prop”：

组件中的props属性

由于组件中的data是一个函数，拥有自己的作用域，所以不能直接传值，我们就需要用props属性来进行数据的传递。也就是说，组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

//传入普通字符串
<child my-message="hello!"></child>

Vue.component('child',{
    // 声明props
    props:['message'],
    // 就像 data 一样，prop 可以用在模板内
    // 同样也可以在 vm 实例中像 “this.message” 这样使用
    template: '<span>{{ message }}</span>'
})
new Vue({
    el:"#app",
})

camelCase vs. kebab-case

HTML 特性不区分大小写。当使用非字符串模版时，prop的名字形式会从 camelCase 转为 kebab-case（短横线隔开）：

Vue.component('child', {
  // camelCase in JavaScript
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})
<!-- kebab-case in HTML -->
<child my-message="hello!"></child>

再次说明，如果你使用字符串模版，不用在意这些限制。

动态Prop

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：

html代码

<div>
    <input v-model="parentMsg">
    <br>
    <child v-bind:my-message="parentMsg"></child>
</div>

js代码

Vue.component('child',{
        // 声明props
        props:['myMessage'],
        // 就像 data 一样，prop 可以用在模板内
        // 同样也可以在 vm 实例中像 “this.message” 这样使用
        template: '<span>{{ myMessage }}</span>'
    })
    new Vue({
        el:"#app",
        data:{
            name:"luoxue"
        }
    })

字面量语法 VS 动态语法

html:如果在为vue组件prop定义或者赋值的时候用了“v-bind:”的动态语法，则会先将其转化为js表达式，然后计算结果赋值，下面示例中，第一个传递的是字符串，第二个传递的是1+2即3的数值

<h3>#字面量语法 VS 动态语法</h3>
<div id="app">
    <!-- 这里传递是字符串 -->
    <child my-message="1+2"></child>
    <!-- 这里用了动态语法，传递的值会通过js的表达式计算，传递的是数字 -->
    <child :my-message="1+2"></child>
</div>

<script type="text/javascript">
    //字面量语法 VS 动态语法
    Vue.component("child", {
        props: ["myMessage"],
        template: "<div>myMessage: {{ myMessage }}</div>"
    });
    var vm = new Vue({
        el: "#app",
    });
</script>

单项数据流

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。

另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop 。如果你这么做了，Vue 会在控制台给出警告。
通常有两种改变 prop 的情况：

prop 作为初始值传入，子组件之后只是将它的初始值作为本地数据的初始值使用；
prop 作为需要被转变的原始值传入。

单项数据流 VS 双向数据流

<h3>Prop类型绑定（单向、双向）</h3>
<div id="dr05">
    <div>
        <div>vue实例：</div>
        <input v-model="name" />
    </div>
    <br />
    <div>
        <div>component组件（默认）：</div>
        <child05 :my-message05="name"></child05>
        <div>component组件（once）：</div>
        <child05 :my-message05.once="name"></child05>
        <div>component组件（sync）：</div>
        <child05 :my-message05.sync="name"></child05>
    </div>
</div>

<script type="text/javascript">
    //Prop类型绑定
    Vue.component("child05", {
        props: ["myMessage05"],
        template: '<input type="text" v-model="myMessage05" />'
    });
    var dr05 = new Vue({
        el: "#dr05",
        data: {
            name: "DarkRanger",
        }
    });
</script>

Prop验证（转）

组件可以为 props 指定验证要求。如果未指定验证要求，Vue 会发出警告。当组件给其他人使用时这很有用。

prop 是一个对象而不是字符串数组时，它包含验证要求：

<h3>#Prop验证</h3>
<div id="dr06">
    <div>
        <div>
            name:{{dr.name}}, age:{{dr.age}}.</div>
        <div><input v-model="telphone" /></div>
    </div>
    <div>
        <child06 :msg_null="123+456" msg_string="this is string" :msg_number="99" :msg_twoway.sync="telphone" :msg_validate="mobilephone" :msg_number2String="mobilephone" :msg_obj2json="dr" :msg_json2obj="drJson"></child06>
    </div>
</div>


//Prop验证
Vue.component("child06", {
    props: {
        //基础类型检测("null"意思是任何类型都可以)
        msg_null: null,
        //String类型，必须是定义过的，可以是空字符串""
        msg_string: {
            type: String,
            required: true,
        },
        //Number类型，默认值100
        msg_number: {
            type: Number,
            default: 100,
        },
        //Object类型，返回值必须是js对象
        msg_obj: {
            type: Object,
            default: function() {
                return {
                    name: "DarkRanger",
                    age: "18",
                }
            }
        },
        //指定这个prop为双向绑定
        //如果绑定类型不对将抛出一条警告
        msg_twoway: {
            type: String,
            twoWay: true,
        },
        //自定义验证，必须是Number类型，验证规则：大于0
        msg_validate: {
            type: Number,
            validator: function(val) {
                return val > 0;
            }
        },
        //将值转为String类型
        //在设置值之前转换值(1.0.12+)
        msg_number2string: {
            coerce: function(val) {
                return val + ""
            }
        },
        //js对象转JSON字符串
        msg_obj2json: {
            coerce: function(obj) {
                return JSON.stringify(obj);
            }
        },
        //JSON转js对象
        msg_json2obj: {
            coerce: function(val) {
                return JSON.parse(val);
            }
        },
    },
    template: '<div>msg_null: {{msg_null}}</div>' 
　　　　+ '<div>msg_string:{{msg_string}}</div>' 
　　　　+ '<div>msg_number: {{msg_number}}</div>' 
　　　　+ '<div>msg_obj:{{"name-->"+msg_obj.name+", age-->"+msg_obj.age}}</div>' 
　　　　+ '<div>msg_twoway:<input v-model="msg_twoway"></div>' 
　　　　+ '<div>msg_validate:{{msg_validate}}</div>' 
　　　　+ '<div>msg_number2String: {{msg_number2string}}</div>' 
　　　　+ '<div>msg_obj2json: {{msg_obj2json}}</div>'
　　　　+'<div>msg_json2obj:{{"name: "+msg_json2obj.name+"; age: "+msg_json2obj.age}}</div>'
});
var dr06 = new Vue({
    el: "#dr06",
    data: {
        telphone: "0356-1234567",
        mobilephone: 15912345678,
        dr: {
            name: "DarkRanger",
            age: 25
        },
        drJson: '{"name":"DarkRanger","age":25}',
    }
})

动态组件的tab切换

<h3>动态组件</h3>
<!-- 定义三个temp模板，用于切换 -->
<template id="temp-tab01">
    <div>this is tab01</div>
</template>
<template id="temp-tab02">
    <div>this is tab02</div>
</template>   
<template id="temp-tab03">
    <div>this is tab03</div>
</template>

<div id="dr01">
    <!-- 导航栏 -->
    <div class="border cf">
        <ul>
            <li><a href="javascript:void(0);" @click="toggleTabs(tab01Text);">{{tab01Text}}</a></li>
            <li><a href="javascript:void(0);" @click="toggleTabs(tab02Text);">{{tab02Text}}</a></li>
            <li><a href="javascript:void(0);" @click="toggleTabs(tab03Text);">{{tab03Text}}</a></li>
        </ul>
    </div>
    <!-- 点击导航后要切换的内容 -->
    <div class="border" style="height: 100px;">
        <!-- 如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数 -->
        <component :is="currentView" keep-alive></component>
    </div>
</div>


<script type="text/javascript">
    //扩展组件tab01
    var tab01 = Vue.extend({
        template: "#temp-tab01",
    });
    //扩展组件tab02
    var tab02 = Vue.extend({
        template: "#temp-tab02",
    });
    //扩展组件tab03
    var tab03 = Vue.extend({
        template: "#temp-tab03",
    });
    //新建vue实例
    var dr01 = new Vue({
        el: "#dr01",
        data: {
            tab01Text: "tab01", //导航栏文本1
            tab02Text: "tab02", //导航栏文本2
            tab03Text: "tab03", //导航栏文本3
            currentView: 'tab01', //默认选中的导航栏
        },
        //局部注册组件
        components: {
            tab01: tab01,
            tab02: tab02,
            tab03: tab03,
        },
        methods: {
            //绑定tab的切换事件
            toggleTabs: function(tabText) {
                this.currentView = tabText;
            }
        }
    });     
</script>

使用slot分发内容

单个slot

除非子组件模板包含至少一个 <code><slot></code> 插口，否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的 slot 时，父组件整个内容片段将插入到 slot 所在的 DOM 位置，并替换掉 slot 标签本身。

最初在 <code><slot></code> 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。

<h3>#单个slot</h3>
<!-- 定义child01模板 -->
<template id="child01">
    <div>this is temp01 component!</div>
    <slot>
        如果没有分发内容，这里将会被显示
    </slot>
</template>
<div id="dr01">
    <child01></child01>
    <br /><br />
    <child01>
        <div>这里有新的内容01</div>
        <div>这里有新的内容02</div>
    </child01>
</div>

<script type="text/javascript">
    //单个slot
    var child01 = Vue.extend({
        template: "#child01",
    });
    var dr01 = new Vue({
        el: "#dr01",
        components: {
            "child01": child01
        }
    });
</script>

具名slot

<code><slot></code> 元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素。

仍然可以有一个匿名 slot ，它是默认 slot ，作为找不到匹配的内容片段的备用插槽。如果没有默认的 slot ，这些找不到匹配的内容片段将被抛弃。

<h3>#具名Slot（有名称的slot）</h3>
<!-- 定义模板child02 -->
<template id="child02">
    <slot name="s1"></slot>
    <slot></slot>
    <slot name="s2"></slot>
</template>
<div id="dr02">
    <child02>
        <div slot="s1">this is slot01</div>
        <div slot="s2">this is slot02</div>
        <div>this is a simple div01</div>
        <div>this is a simple div02</div>
    </child02>
</div>

<script type="text/javascript">
    //具名slot
    var child02 = Vue.extend({
        template: "#child02"
    });
    var dr02 = new Vue({
        el: "#dr02",
        components: {
            "child02": child02
        }
    });
</script>

编译作用域

作用域插槽是一种特殊类型的插槽，用作使用一个（能够传递数据到）可重用模板替换已渲染元素。

当组件中拥有了slot插口的时候，组件内的内容片断都将替换掉slot

在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样：

<h3>编译作用域</h3>
<template id="child03">
    <div>the two items following is child msg:</div>
    <div>{{cmsg_01}}</div>
    <div>{{cmsg_02}}</div>
    <br />
    <div>the three items following is parent msg:</div>
    <slot name="s1"></slot>
    <slot></slot>
    <slot name="s2"></slot>
</template>
<div id="dr03">
    <child03>
        <div slot="s1">{{msg01}}</div>
        <div slot="s2">{{msg02}}</div>
        <div>{{msg03}}</div>
    </child03>
</div>
</body>

<script type="text/javascript">
    var child03 = Vue.extend({
        data: function() {
            return {
                cmsg_01: "this is child msg_01",
                cmsg_02: "this is child msg_02",
            }
        },
        template: "#child03",
    })
    var dr03 = new Vue({
        el: "#dr03",
        data: {
            msg01: "this is parent msg01",
            msg02: "this is parent msg02",
            msg03: "this is parent msg03",
        },
        components: {
            "child03": child03
        }
    });
</script>

上一篇： VS Code | 如何快速重启VS Code？

下一篇： vuejs实现表格分页

VueJS组件篇

Android组件之DrawerLayout实现抽屉菜单

有关经验交流的文章推荐10篇

关于sde的10篇课程推荐

妙味课堂JS高级专题篇视频资料分享

javascript 小型动画组件与实现代码

小菜鸟学黑客(1)php篇

CSS组件化思考_html/css_WEB-ITnose

PHP调用VC编写的COM组件实例_PHP教程

几款经典Flash源文件集锦-导航篇

【Oracle篇】常用查询与SQL92笔记（一）