Vue基础 - 组件

组件的概念

组件至关于积木玩具，许许多多不一样的积木就能够拼装成汽车，城堡，动物等等各类各样的玩具模型，所以不一样的组件相互组合起来就能够产生一个组合模板。在网页开发中很是实用。

注册基本组件

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

全局组件

<div id="app">
    <mycomponent></mycomponent>
</div>
<!-- js -->
Vue.component('mycomponent',{
	template : '<div>这是一个自定义组件</div>'
});
复制代码

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

局部组件

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

new Vue({
    el : '#app',
    data : {},
    methods : {},
    components : {
        home : {
            template : '<div>这是局部组件</div>'
        }
    },
});
复制代码

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  |  <div>这是局部组件</div><div></div>
   |                   ^^^^^^^^^^^
found in
---> <Home>
       <Root>
复制代码

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属性才能正常使用。

<table> 
	<tr is="mycomponent"></tr> 
</table>
复制代码

组件的交配

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

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

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

1.定义一个组件模板：

<!-- 组件模板的定义 -->
    <template id="fucomponent">
        <div>
            文本是：{{str}}
        </div>
    </template>
复制代码

2.绑定组件

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

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

<fucp str = '我是props传递的参数'></fucp>
复制代码

prop的参数类型

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

props : {
    text : String,
}
复制代码

子组件传递给父组件

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

1.建立子组件

<template>
    <div>
        <!-- 开始定义组件 -->
        <button @click="postSj">上传子组件信息</button>
    </div>
</template>
<script>
export default{
    name : 'child',
    methods: {
        postSj : function (){
            this.$emit('getmsg','我是子组件传递过来的组件');
        }
    }
}
</script>
<style>
</style>
复制代码

2.建立父组件

<template>
  <div class="hello">
    <h4>parent</h4>
    <h5>title的值:{{title}}</h5>
    <child @getmsg='getmsg'></child>
  </div>
</template>

<script>
import child from './child'
export default {
  name: 'HelloWorld',
  data () {
    return {
      title : ''
    }
  },
  methods : {
    getmsg(res){
      this.title = res;
    }
  },
  components: {
    child
  },
}
</script>
复制代码

实例：