菜鸟追梦旅行

这个屌丝很懒，什么也没留下！

热门标签

Vue2.5学习笔记（二）深入了解组件_vue2.5 组件在dom中使用的名称

作者：菜鸟追梦旅行 | 2024-06-05 03:22:18

踩

vue2.5 组件在dom中使用的名称

文章目录

1.组件使用的细节
2.父子组件间传值
3.插槽
4.作用域插槽
5.动态组件

1.组件使用的细节

1.2 子标签内使用组件

假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。
为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。
在这里插入图片描述

1.2 非根组件的data必须是一个函数

一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。

1.3 在Vue中操作DOM：使用ref属性

在Vue中，可以为DOM节点设置ref属性，从而可以通过实例名（实例引用this).$ref.属性名来访问DOM节点。
在这里插入图片描述

2.父子组件间传值

2.1 父组件向子组件传值：通过属性传值

Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。

<body>
    <div id="root">
        <counter :count="count1"></counter>
        <counter :count="count2"></counter>
    </div>
    <script>
        var counter = {
            props:['count'],
            data:function(){
                // 子组件不能直接修改父组件传过来的值，因此需要将附件传过来的值复制一份
                return {
                    number:this.count
                }
            },
            template:'<div @click="handleClick">{{number}}</div>',
            methods:{
                handleClick:function(){
                    this.number ++;
                }
            }
        }
        var vm = new Vue({
            el:"#root",
            data:{
                count1:0,
                count2:1
            },
            components:{
                counter:counter
            }
        })
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

2.2 子组件向父组件传值：通过事件this.$emit()

<body>
    <div id="root">
        <counter :count="count1" @change="handleChange"></counter>
        <counter :count="count2" @change="handleChange"></counter>
        <div>{{total}}</div>
    </div>
    <script>
        var counter = {
            props:['count'],
            data:function(){
                // 子组件不能直接修改父组件传过来的值，因此需要将附件传过来的值复制一份
                return {
                    number:this.count
                }
            },
            template:'<div @click="handleClick">{{number}}</div>',
            methods:{
                handleClick:function(){
                    this.number ++;
                    this.$emit('change',1);
                }
            }
        }
        var vm = new Vue({
            el:"#root",
            data:{
                count1:0,
                count2:1,
                total:1
            },
            components:{
                counter:counter
            },
            methods:{
                handleChange:function(step){
                    this.total += step;
                }
            }
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

通过在子组件中触发自定义事件$emit('事件名',参数列表...)，父组件可以监听到这个事件。

== 一句话总结 ==：父组件通过props给子组件传值，子组件通过事件触发给父组件传值。

2.3 组件参数校验

假设我们在子组件中限定，父组件必须传一个字符串给子组件。

<body>
    <div id="root">
        <child :content="content"></child>
    </div>
    <script>
    	// 全局子组件
        Vue.component('child',{
            props:{
                content:String
            },
            template:'<div>{{content}}</div>'
        })
        var vm = new Vue({
            el:'#root',
            data:{
                content:123
            }
        })
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

当父组件传了一个数字后，Vue会警告如下：
在这里插入图片描述
当允许多个类型时，使用数组语法：

props:{
     content:[Number,String],//数组语法表示，该参数既可以接受Number类型也可以接受String类型
}
1
2
3

更详细的参数校验：

<body>
    <div id="root">
        <child :content="content"></child>
    </div>
    <script>
        Vue.component('child',{
            props:{
                content:{
                    type:String,
                    required:true,
                    default:'default value',
                    // 校验长度
                    validator:function(value){
                        return (value.length>5)
                    }
                }
            },
            template:'<div>{{content}}</div>'
        })
        var vm = new Vue({
            el:'#root',
            data:{
                content:"Hello,world"
            }
        })
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

2.4 非props特性

若父组件向子组件传递了一个参数content，但子组件并未接受（即子组件的props属性内不包含content）时，父组件的content特性成为非props特性，当然在子组件中无法获取该特性的值。非props属性会显示在DOM属性中，而props属性不会。

2.5 给子组件绑定原生事件

当我们想给子组件上绑定原生事件，例如click，我们首先可能会想到这么做：

<body>
    <div id="root">
        <child @click="handleClick"></child>
    </div>
    <script>
        Vue.component('child',{
            template:'<div>Hello,world</div>'
        })
        var vm = new Vue({
            el:'#root',
            methods:{
                handleClick:function(){
                    alert("click");
                }
            }
        })
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

这样做的结果是：无论点击多少次，都无法触发click事件处理函数。
原因在于，直接给子组件的DOM元素上绑定的事件全部为自定义事件，click也被识别为自定义事件，我们没有关于click的触发定义，因此不会触发handleClick。
那么怎么给子组件绑定原生事件呢？
我们需要把事件绑定到子组件的模板上，并且相关的事件处理函数也应该定义在子组件内。

<body>
    <div id="root">
        <child></child>
    </div>
    <script>
        Vue.component('child',{
            template:'<div @click="handleClick">Hello,world</div>',
            methods:{
                handleClick:function(){
                    alert("click");
                }
            }
        })
        var vm = new Vue({
            el:'#root',
        })
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

要想触发原生事件，可以在子组件的原生事件处理函数中使用$emit('click')

<body>
    <div id="root">
        <child @click="handleClick"></child>
    </div>
    <script>
        Vue.component('child',{
            template:'<div @click="handleChildClick">Hello,world</div>',
            methods:{
                handleChildClick:function(){
                    alert("click child");
                    this.$emit('click');
                }
            }
        })
        var vm = new Vue({
            el:'#root',
            methods:{
                handleClick:function(){
                    alert("click");
                }
            }
        })
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

以上的做法过于繁琐，Vuet提供了组件修饰符：

<child @click.native="handleClick"></child>
1

@事件名.native 表明该事件是一个原生事件

2.6 非父子组件之间的传值

在这里插入图片描述
方式一：使用Vuex
方式二：使用发布订阅模式（总线机制/BUS/发布订阅模/观察者模式）

下面介绍方式二：

Vue.prototype.bus = new Vue();
1

在Vue类的prototype上挂了一个bus属性，该属性是Vue类型的对象。因为是在原型上，Vue类的每个实例都会有一个bus属性，而且指向同一个Vue实例。
我们可以通过bus属性来统一地触发事件并携带参数。

<body>
    <div id="root">
        <child content="dell"></child>
        <child content="lee"></child>
    </div>
    <script>
        Vue.prototype.bus = new Vue();
        // 在Vue类的prototype上挂了一个bus属性，该属性是Vue类型的对象
        // 因为是在原型上，Vue类的每个实例都会有一个bus属性，而且指向同一个Vue实例
        Vue.component('child',{
            data:function(){
                return {
                    selfContent:this.content
                }
            },
            props:{
                content:String
            },
            template:'<div @click="handleClick">{{selfContent}}</div>',
            methods:{
                handleClick:function(){
                    this.bus.$emit('change',this.selfContent);
                }
            },
            mounted:function(){
                var that = this;
                this.bus.$on('change',function(msg){
                    that.selfContent = msg;
                })
            }
        })
        var vm = new Vue({
            el:"#root"
        })
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

3.插槽

使用场景：当子组件中有一部分DOM元素时根据父组件传递过来的值进行渲染的，这时使用props传值会直接将HTML标签渲染在页面上，为了避免这一错误，我们可能需要使用div来包裹，并且使用v-html指令来确保其格式正确，如下：

<body>
    <div id="root">
        <child content='<h2>World</h2>'></child>
    </div>
    <script>
        Vue.component('child',{
            props:['content'],
            template:`<div>
                        <h1>Hello</h1>
                        <div v-html="content"></div>
                      </div>`
        })
        var vm = new Vue({
            el:"#root"
        })
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这样的方式在传递的代码量大的情况下会非常糟糕。
这种情况下，可以使用插槽。

<body>
    <div id="root">
        <child>
            <h2>World</h2>
        </child>
    </div>
    <script>
        Vue.component('child',{
            props:['content'],
            template:`<div>
                        <h1>Hello</h1>
                        <slot></slot>
                      </div>`
        })
        var vm = new Vue({
            el:"#root"
        })
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在这个例子中，我们将需要插入到子组件的内容，直接以HTML标签的形式写在了子组件的占位标签内<child></child>，在子组件的模板中使用<slot></slot>标签可以接收到自己占位标签内的所有内容。
可以在插槽内指定默认内容，该内容会在父组件未给子组件的插槽传递值时显示，若传递了，则默认隐藏。

<slot>默认内容</slot>
1

具名插槽

为了在子组件中使用多个插槽，而每个插槽拥有不同的内容，我们需要给插槽起名：在外部，给传进插槽的DOM元素指定slot特性；在内部，给插槽指定name特性，与外部要传入该插槽的slot特性名一致。

<body>
    <div id="root">
        <body-content>
            <div class='header' slot='header'>header</div>
            <div class='footer' slot='footer'>footer</div>
        </body-content>
    </div>
    <script>
        Vue.component('body-content',{
            props:['content'],
            template:`<div>
                        <!-- header部分 -->
                        <slot name='header'></slot>
                        <div class='content'>content</div>
                        <!-- footer部分 -->
                        <slot name='footer'></slot>
                      </div>`
        })
        var vm = new Vue({
            el:"#root"
        })
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在这里插入图片描述

4.作用域插槽

子组件在渲染数据时，可以不指定具体的渲染样式，而由父组件来决定该数据渲染成什么样子。
做法：
在子组件的模板中定义插槽：

template:`<div>
                       <ul>
                        <slot v-for="item in list" :item=item></slot>
                       </ul>
                      </div>`
1
2
3
4
5

在父组件对应子组件的位置使用<template>标签声明作用域插槽，并使用slot-scope属性接受参数。
作用域插槽必须包裹在template标签内

            <template slot-scope="props">
                <li>{{props.item}}</li>
            </template>
1
2
3

<body>
    <div id="root">
        <child>
            <template slot-scope="props">
                <li>{{props.item}}</li>
            </template>
        </child>
    </div>
    <script>
        Vue.component('child',{
            data:function(){
                return{
                    list:[1,2,3,4]
                }
            },
            template:`<div>
                       <ul>
                        <slot v-for="item in list" :item=item></slot>
                       </ul>
                      </div>`
        })
        var vm = new Vue({
            el:"#root"
        })
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

5.动态组件

如果我们想根据一些条件动态地决定渲染哪些组件，不渲染哪些组件，我们可以这样做：

<body>
    <div id="app">
        <child-one v-if="type === 'child-one'"></child-one>
        <child-two v-if="type === 'child-two'"></child-two>
        <button @click="handleSwtich">切换</button>
    </div>
    <script>
        Vue.component('child-one',{
            template:'<div>child-one</div>'
        })
        Vue.component('child-two',{
            template:'<div>child-two</div>'
        })
        var vm = new Vue({
            el:"#app",
            data:{
                type:'child-one'
            },
            methods:{
                handleSwtich:function(){
                    this.type = this.type === 'child-one' ? 'child-two' : 'child-one';
                }
            }
        })
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

以v-if的方式切换组件的渲染与否，每次切换都会有一个组件被销毁，有一个组件被渲染，若每次销毁和新建的组件内容一样，则会非常浪费性能。
为解决这个问题，可以使用v-once指令，使用了v-once指令的组件，会在第一次渲染时就被加载进内存，以后使用v-if切换时不会销毁和重新创建，而是直接从内存中加载，这样做能提高性能。

Vue提供了动态组件，可以更好地解决这个问题：

<component :is="type"></component>
1

<component>所代表的组件为动态组件，它的is特性指明它的类型。通过动态地改变is特性达到动态改变组件类型的目的。

        Vue.component('child-one',{
            template:'<div v-once>child-one</div>'
        })
        Vue.component('child-two',{
            template:'<div v-once>child-two</div>'
        })
1
2
3
4
5
6

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/674599