Vue——组件

　　组件化思想是Vue最为核心的一个思想

　　Vue中的每个实例都是一个组件，也就是说一个项目是由不少个组件/实例组成的，所以，掌握组件的知识点尤其重要

 

基本概念

　　组件即为一个能够复用的Vue实例，能够在Vue根实例中反复使用

声明方式

　　分两种：全局和局部

　　全局组件用Vue实例的component方法来建立

　　

　　全局组件能够在Vue根实例下直接使用其名字为标签名的标签来调用，无需注册

　　

　　而局部组件则是用一个对象来建立的，对象名即组件名，但使用以前须要注册（Vue实例的components中）

　　若是对原有的组件名不满意，能够在注册时修改

　　

　　

　　因为组件是能够复用的Vue实例，所以组件中也能够添加data、computed、methods、watch等，只有el是不能够添加的（仅属于根实例）

根元素

　　组件中，一个模板中只能有一个根元素

　　以下就是不行的，会报错，只认第一个元素，其他元素都删除

　　

　　这时须要用一个父元素充当根元素，以下

　　

 

组件传值

插槽

　　当须要向组件内添加内容的时候，可能出现以下的状况

　　

　　这时hello不会出如今页面中，所以须要添加一个插槽，以便让添加在组件中的内容添加到其中，并被浏览器渲染出来

　　

name属性

　　若是出现多个插槽，全部添加进去的内容会被复制，并插入这多个插槽中，可是并非咱们所须要的效果

　　

　　这里就须要对插槽添加name属性，以标识出不一样的插槽，具体内容须要插入哪一个插槽，在标签中添加slot属性并书写对应的插槽的name值

　　

动态组件

　　对于注册过的组件，若是想动态变动调用的组件，可使用Vue自带的component标签，在其中用v-bind绑定is属性

　　

元素渲染

　　有些元素内部的标签是固定的，例如table中只能够有tr、td，若是在table标签中添加了非tr、td标签，则页面渲染时，会把内部标签渲染到外面

　　

　　

　　为了解决这种问题，能够在table标签中正常添加tr标签，在tr标签上添加is属性，属性值为须要添加在这个位置的组件名称

　　

refs

　　ref是Vue里用来获取DOM节点的一个方法，绑定在须要获取节点的标签上，能够在mounted这个生命周期里用this.$refs.ref名称的方法取到相应的DOM节点

　　获取以后，就能够对这个DOM节点进行编辑了（相似于原生的JS）

　　

　　而在组件中，给组件添加上ref，获得的是组件自己的引用

　　（未完待续）