Vue基础 - 组件基本使用

组件的概念

组件相当于积木玩具，许许多多不同的积木就可以拼装成汽车，城堡，动物等等各种各样的玩具模型，因此不同的组件相互组合起来就可以产生一个组合模板。在网页开发中非常实用。

注册基本组件

组件也分为全局组件和局部组件。

全局组件

    


Vue.component('mycomponent',{
    template : '
这是一个自定义组件
'
});

在Vue中通过component()来定义组件，第一个参数为组件名称，第二个为组件对象，其中包含了data,templat等对象。

局部组件

顾名思义，局部组件只能在Vue实例中的使用，通过new Vue中的components对象来实现：

new Vue({
    el : '#app',
    data : {},
    methods : {},
    components : {
        home : {
            template : '
这是局部组件
'
        }
    },
});

template模板的要求

1.模板下只能拥有一个根元素，如果多出来，会报错以下信息

[Vue warn]: Error compiling template:
Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

1  |  
这是局部组件

   |                   ^^^^^^^^^^^
found in
---> 
       

2.组件中的data和el必须是一个函数，通过返回值，为什么是函数形式呢？主要还是因为像Vue那样传递的话，会造成当一个组件中的某个值修改的时候，所有值都被修改了。

3.在HTML中，组件可能会受到一些限制，比如在表格中，如果使用自定义组件的话，它会被认为是无效的内容。下面列出一些常见会出现问题的标签：

• a 不能包含其它的交互元素（如按钮，链接）
• ul 和 ol 只能直接包含 li
• select 只能包含 option 和 optgroup
• table 只能直接包含 thead, tbody, tfoot, tr, caption, col, colgroup
• tr 只能直接包含 th 和 td

因此，我们需要使用is属性才能正常使用。

组件的交配

在实际开发中组件之间的配合使用时必然的，因此父组件需要给子组件发数据，子组件也需要将自己发生的事件传递给父组件，在开发中，我们定义模块除了更好的对代码分块，利于阅读和维护外，还能减少一些代码的重复，来达到复用。因此，组件里面的数据就需要我们开发者自己传递进去。

传递数据给组件，实现组件的复用性

在组件传递参数中，我们可以使用props来传递参数，

1.定义一个组件模板：

2.绑定组件

components : {
    fucp : {
        template : '#fucomponent',
            //传递参数
            props: ["str","str1"],
                data () {
                return {
                }
            }
    },
}

3.使用组件，并且传递参数

prop的参数类型

在传递数中prop是可以规定参数的类型的，需要将props转换成对象的形式

props : {
    text : String,
}

子组件传递给父组件

自组件传递给父组件可以使用on的方式进行沟通

1.创建子组件

2.创建父组件

实例：

fuzistoke.png