Vue-组件学习

全局注册组件的过程

1、注册(创建)一个全局组件，使用 Vue.component(tagName, options)

 
 

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

  
  })
 
 

2、创建根实例

3、在父实例的模块中以组件名的形式(类似自定义标签)使用。

• //父实例的模板 <div id="example"> <my-component> </my-component> </div>

  // 注册 Vue.component( 'my-component', { template: '<div>A custom component!</div>' }) // 创建根实例 new Vue({ el: '#example' })

渲染为：<div id="example">  

                <div>A custom component!</div>

             </div>

局部注册:

      

<!-- 仅在父模板id为app下可用 -->
	<div id="app"> 
		<my-component><my-component>
		<!-- 父模板会将上面渲染为<div>A custom component!</div>-->
	</div>
	<script type="text/javascript">
		// 要在创建对象实例之前注册组件
		var Child = {  template: '<div>A custom component!</div>'}
		var vm=new Vue({  
			el: '#app',  
			components: {    //<my-component>将只在父模板可用    
				'my-component': Child  
			}
		})

通常 父子组件 会是这样的 关系 ：组件 A 在它的模版中使用了组件 B 。它们之间必然需要相互通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。

在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props向下传递数据给子组件，子组件通过 events 给父组件发送消息。

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，应该怎样做？那就是自定义事件！

1、父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件

为了让组件可以组合(自定义标签的嵌套)，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为 内容分发 。使用特殊的 <slot> 元素作为原始内容的插槽。分发内容是在父组件作用域内编译。

最初在 <slot> 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。

Vue 组件的 API 来自三部分 - props, events 和 slots ：
Props 允许外部环境传递数据给组件
Events 允许组件触发外部环境的副作用
Slots 允许外部环境将额外的内容组合在组件中。