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,
}

子组件传递给父组件

自组件传递给父组件可以使用 $emit和$ 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>

实例：

fuzistoke.png