vue-组件的三种注册形式

组件注册及其通信传值(重点内容)

 

1.什么是组件？

任何一个页面我们都可以看做成无数个组件的构成，但是组件只能有一个根元素，也就是说我们需要将一个大的div把它整个包起来，组件化的方式可以让很多代码进行复用，例如类似的表单注册一个组件后，只需要将组件名作为一个标签使用即可达到想用的效果。

 

2.组件中的data必须是函数

可以看出，注册组件时传入的配置和创建Vue实例差不多，但也有不同，其中一个就是data属性必须是一个函数。

这是因为如果像Vue实例那样，传入一个对象，由于JS中对象类型的变量实际上保存的是对象的引用，所以当存在多个这样的组件时，会共享数据，导致一个组件中数据的改变会引起其他组件数据的改变。

而使用一个返回对象的函数，每次使用组件都会创建一个新的对象，这样就不会出现共享数据的问题来了

 

3.组件挂载元素的局限性：

由于html标签本身就有很多的限制性，例如table标签放不了div，option只能放在select里面等,所以组件挂载元素的时候要注意使用i属性，他可以避免自定义组件在标签中的限制性

 

 

4.组件的分类：

(1)局部组件

在vue实例中使用实例属性components来进行注册，为局部组件，只能在该vue实例绑定的dom节点内使用.

例如：

<div id="root">

<list></list>

<br/>

<now></now>



</div>

<script>

new Vue({

//绑定元素

el:"#root",

data:{

},

//注册局部组件

components:{

· 'list':{

//模板只能有一个根元素

template:'<div><span>this is list</sapn><br/><p>Do you see?</p></div>',

},

'now':{

template:'<div>this is time</div>'

}

}

})

</script>

 

（2）全局组件的注册

①使用vue提供的静态函数component注册

<div id="root">

<mycomponent></mycomponent>

</div>



<script>

Vue.component('mycomponent',{

template: `<div>这是一个自定义组件,数据域为{{message}}</div>`,

//下面的数据域只能在该组件模板中使用

data () {

return {

message: 'hello world'

}

}

})

//必须创建绑定元素一个实例，不然无法使用定义的组件

new Vue({

el:"#root",

})

</script>

 

②单文件组件

即后缀为vue的文件，每一个文件都是一个单独的组件，使用脚手架创建的的项目组件目录位于src下的components里，我们可以看看里面的例子文件，代码如下：

<template>

<div class="hello">

<h1>{{ msg }}</h1>

<h2>Essential Links</h2>

</div>

</template>



<script>

export default {

name: 'HelloWorld',

data () {

return {

msg: 'Welcome to Your Vue.js App'

}

}

}

</script>



<style scoped>

h1,h2{

font-weight:normal;

}

</style>

 

单文件组件以三个部分组成：模板，脚本，样式

 

模板：主要以HTML标签及数据变量为主，是组件的基础部分。

 

脚本：即js代码，主要是对数据的操作。

 

样式：scoped代表这个样式只在这个组件内生效。

<style>有scope属性后，能够将标签内部的CSS选择器自动加上后缀，使其仅应用在此组件内。