VUE组件基础（一）

VUE组件基础（一）

1.组件的组织

2.组件名的启用（横杠法和驼峰法）

Vue.component('my-component-name', { /* ... */ })

Vue.component('MyComponentName', { /* ... */ })

3.全局注册组件

作用需求：如果想要一个组件在项目中哪里都可以直接调用，这个时候就需要用到全局注册。
缺点：注册了的全局组件，就算不需要用到，仍会占用内存。
目前为止我们使用 Vue.component 来全局注册一个组件

Vue.component('my-component-name', {
  // ... 选项 ...
})

全局注册的组件可以在根实例中被使用，如下例子：

<div id="app">
<!-- app是被根实例接管的，但是却可以使用全局注册的组件  -->
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })

PS: 组件注册必须要放在实例前面完成！！
否则会出现报错：组件未声明 （Unknown custom element: - did you register the component correctly?）

4.局部注册组件

两种方式

第一种 通过一个普通的 JavaScript 对象来注册组件，然后在实例中定义

官方文档写法方式

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

然后在根组件中components中定义

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,//属性名是未来我用的标签，属性值是定义的JS变量。
    'component-b': ComponentB
  }
})

对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。
下面这个例子就是是局部注册实现点击数字加一功能：

<div id="app">
	<com-btn></com-btn>
</div>

<script type="text/javascript">
	var childcom = {
		data: function() {
			return {
					num: 0,
				}
		 },
		template: `<button v-on:click='change'>点我{{num}}次</button>`,
		methods: {
			change: function() {
				this.num += 1;
				}
		 }
	}
	var vm = new Vue({
		el: '#app',
		components: {
			'com-btn': childcom, //调用这个组件
		}
	})
</script>

第二种、直接在实例中 components 属性中注册：然后在挂载的根元素中使用

new Vue({
  el: '#app',
  components: {
    'component-A': {
        <p>我是局部注册的组件</p>}
  }
})

<div id="app">
    <component-A></component-A>
</div>

5. vue中注意的细节点

1)子组件中的data类型必须是一个函数

我们可以通过vue官方文档进行验证，其主要作用是：每个实例可以维护一份被返回对象的独立的拷贝，这可以避免出现点击一个按钮就可能会像如下代码一样影响到其它所有实例的情况。

2)组件中使用is解决标签规范

当组件控制使用h5中组合多级标签时，例如ul、table、ol、select时，必须放其对应的内部标签，不能更改其固有组合类型放置子组件，否则可能会违反h5的编码规范导致报错。
遇见此类问题时，使用is="组件名"的方式挂载到内部标签上。

<div id="app">
   <table>
      <tbody>
            <tr is='row'></tr>
            <tr is='row'></tr>
            <tr is='row'></tr>
      </tbody>
    </table>
</div>
    
<script>
    Vue.component('row', {
        template: '<tr><td>this is a row</td></tr>'
    })
    //全局组件
    var vm = new Vue({
        el: '#app'
    })
</script>

3)通过ref操作dom

首先说明：Vue是不建议我们在代码中操作dom，可是有时候在处理一些复杂的动画效果时候，采取ref属性方法

当在dom中挂在ref='挂载名’时，在根实例中可以使用【this.refs.挂载名.属性名】来获取dom元素的属性值。
当在子组件中挂在ref='挂载名’时，在根实例中可以使用【this.refs.挂载名.属性名】来获取子组件的属性值。