Vue的组件（1）

轮孑哥

已于 2023-02-23 10:01:19 修改

阅读量521

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-11-05 22:45:13 首次发布

本文链接：https://blog.csdn.net/qq_46149597/article/details/127698646

版权

vue 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

1、注册全局组件

全局组件可在所有实例中使用，注册一个全局组件的语法格式如下：

Vue.component(tagName,options)

tagName：表示定义的组件名称，options：该参数可以是应用Vue.extends()方法创建的一个组件构造器，还可以是组件的选项对象，因为组件是可复用的Vue实例，所以它们与一个Vue实例一样接收相同的选项（el选项除外），例如data、computed、watch、methods，以及生命周期钩子等。全局组件需要在创建的根实例之前注册，这样才能使组件在实例中调用，在注册组件之后，可以在创建的Vue根实例中以自定义元素的形式进行使用。

<div id="element">
    <my-components></my-components>
 </div>
 
 <script src="http://60.205.187.0/vue/vue.js"></script>
 <script type="text/javascript">

    //创建组件构造器
    var myComponent=Vue.extend({
        template:'<h3>注册全局组件</h3>'
    })

    //注册全局组件
    Vue.component('myComponents',myComponent)

    //创建根实例
     var demo = new Vue({
         el: '#element'
     })
 
 </script>

注意：组件的命名建议遵循W3C规范中的自定义组件命名方式，即字母全部小写并包含一个连字符“-”，在注册全局组件时命名'myComponents',标签中对应的则是<my-components></my-components>,若不加上 '-' 则会报错，组件的命名中若有大写，则标签中则需要用 '-' 来断开。

上述代码使用了组件构造器的方式，另外还可以在注册的时候直接传入选项对象而不是构造器，为了使代码更简化，建议使用下面的方式：

<div id="element">
    <my-components></my-components>
 </div>
 
 <script src="http://60.205.187.0/vue/vue.js"></script>
 <script type="text/javascript">

    //注册全局组件
    Vue.component('myComponents',{
        template : '<h2>注册全局组件</h2>'
    })

    //创建根实例
     var demo = new Vue({
         el: '#element'
     })
 
 </script>

需要注意的是，组件选项对象中的data和Vue实例选项对象中的data的赋值是不同的，一个组件的data选项必须是一个函数，而不是一个对象。如下代码定义了3个相同的按钮组件，当单击某个按钮时，每个组件都会各自独立维护其自身的data值，因此单击一个按钮时其它组件不会受到影响。

<div id="element">
    <my-components></my-components>
    <my-components></my-components>
    <my-components></my-components>
 </div>
 
 <script src="http://60.205.187.0/vue/vue.js"></script>
 <script type="text/javascript">

    //注册全局组件
    Vue.component('myComponents',{
        data:function(){
            return{
                count:0
            }
        },
        template : '<button v-on:click="count++">单击了{{count}}次</button>'
    })

    //创建根实例
     var demo = new Vue({
         el: '#element'
     })
 
 </script>

2、注册局部组件

通过Vue实例中的components选项可以注册一个局部组件。对于components对象中的每个属性来说，其属性名就是定义组件的名称，其属性值就是这个组件的选项对象。

<div id="element">
    <my-components></my-components>
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">

    var child = {
        template: '<h3>注册局部组件</h3>'
    }

    //创建根实例
    var demo = new Vue({
        el: '#element',
        components: {
            'myComponents': child
        }
    })

</script>

局部注册地组件只能在其父组件中使用，而无法在其他组件中使用。例如，有两个局部组件A和B，如果希望 A在B中可用，则需要将A定义在B的components选项中，如果需要套娃的话如下：

<div id="element">
    <parent-component></parent-component>
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">

    var Child = {
        template: '<h3>子组件：我被套了~</h3>'
    }
    var Parent = {
        template: '<div><h3>父组件：闪开，我要开始套娃了！</h3><child-component></child-component></div>',
        components: {
            'child-component': Child
        }
    }

    //创建根实例
    var demo = new Vue({
        el: '#element',
        components: {
            'parent-component': Parent
        }
    })

</script>

3、Prop数据传递

因为组件实例的作用域是孤立的，所以子组件的模板无法直接引用父组件的数据。如果想要实现父子组件之间数据的传递就需要定义Prop。Prop是父组件用来传递数据的一个自定义属性，这样的属性需要定义在组件选项对象的props选项中。通过props选项中定义的属性可以将父组件的数据传递给子组件，而子组件需要显示地用props选项来声明Prop，示例:

<div id="element">
    <my-component message="没想到吧,我也是ikun"></my-component>
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">

    //注册全局组件
    Vue.component('my-component', {
        props: ['message'],
        template: '<p>{{message}}</p>'
    })

    //创建根实例
    var demo = new Vue({
        el: '#element'
    })

</script>

除了上述代码中传递静态数据的方式外，也可以通过v-bind的方式将父组件中的data数据传递给子组件，每当父组件的数据发送变化时，子组件也会随着变化，示例：

<div id="element">
    <input v-model="ikuns1">
    <my-component v-bind:ikun="ikuns1"></my-component>

    <my-component2 v-bind:ikun="ikuns2"></my-component2>

    <my-component3 v-bind="ikuns3"></my-component3>
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
    //传递字符、数字
    Vue.component('my-component', {
        props: ['ikun'],
        template: '<div>传递字符数字：<p>{{ikun}}</p></div>'
    })
    //传递数组
    Vue.component('my-component2', {
        props: ['ikun'],
        template: '<div>传递数组:<p v-for="item in ikun">{{item}}</P></div>'
    })
    //传递对象
    Vue.component('my-component3', {
        props: ['name', 'sex', 'age'],
        template: '<div>传递对象:<div>名字：{{name}} 性别：{{sex}} 年龄：{{age}}</div></div>'
    })
    //创建根实例
    var demo = new Vue({
        el: '#element',
        data: {
            ikuns1: '香顿煎鱼食不食？',
            ikuns2: ['铁', '山', '靠'],
            ikuns3: {
                name: '菜虚鲲',
                sex: 'girl',
                age: '89'
            }
        }
    })

</script>

4、Prop验证

组件可以为Prop指定验证要求。当开发一个可以为他人使用的组件时，可以让使用者更加准确地使用组件，使用验证的时候，Prop接收的参数是一个对象，而不是一个字符串数组。例如：props：{a:Number},表示验证参数a为Number类型，如果调用该组件传入的a为字符串，则会抛出异常。

//基础类型检测，允许参数为指定的一种类型
props{
    propA:String
}

//多种类型，允许参数为多种类型之一
props{
    propB:{String,Number}
}

//参数必须，参数必须有值且为指定的类型
props{
    propC:{
       type:String,
    required:true 
    }
}

//参数默认，参数赋予默认值
props{
    propD:{
        type:String,
        default:'ikun'
    }
}

//如果赋予的默认参数是数组或对象
props{
    propD:{
        type:Object,
        default:function(){
            return{
                message: 'xxx'
            }
        }
    }
}

//自定义验证函数
props{
    propE:{
        validator:function(value){
            return value>0;
        }
    }
}

使用实例：

<div id="element">
    <my-component :num="666" :message="'我是ikun'" :custom="50"></my-component>
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">

    Vue.component('my-component', {
        props: {
            //检测是否为字符串类型
            num:String,
            //检测是否有值且为字符串类型
            message:{
                type:String,
                required:true
            },
            //检测是否为数值类型且默认值为6666
            dnum:{
                type:Number,
                default:6666
            },
            //检测是否为对象类型且有默认值
            object:{
                type:Object,
                default:function(){
                    return {message:'ikun'}
                }
            },
            //检测参数是否大于0
            custom:{
                validator:function(value){
                    return value>0;
                }
            }
        },
        template: 
            '<div>\
                <p>num:{{num}}</p>\
                <p>message:{{message}}</p>\
                <p>dnum:{{dnum}}</p>\
                <p>object:{{object}}</p>\
                <p>custom:{{custom}}</p>\
            </div>'
    })

    //创建根实例
    var demo = new Vue({
        el: '#element'
    })

</script>