组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素.

注册

全局注册

<div id="app"><my-component></my-component>
</div>  <script>//注册全局组件Vue.compnent('my-component',{template:'<div><input type="button" value="弹出" @click="tanshu"/></div>'  ,  data:function(){return{msg1:'helloworld'};},methods:{tanchu:function(){alert(this.msg1);}}});//初始化根实例var vm=new Vue({el:'#app',date:{msg:'hello world!',},});
</script>  

局部注册

不必在全局注册每个组件。通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用：

//初始化根实例<div id="app1"><my-component1></my-component1>
</div><script>//局部注册var zujian={template:'<div><input type="button" value="tanchu" @click="tanshu"/></div>'  ,  data:function(){return{msg1:'helloworld'};},methods:{tanchu:function(){alert(this.msg1);}}});//初始化根实例var vm=new Vue({el:'#app1',date:{msg:'hello world!',   },components:{'my-component1':zujian}});
</script>  

配置组件

像这些元素 <ul>，<ol>，<table>，<select> 限制了能被它包裹的元素，而一些像 <option> 这样的元素只能出现在某些其它元素内部。在自定义组件中使用这些受限制的元素时会导致一些问题，例如：

<table><my-row>...</my-row>
</table>  

自定义组件 <my-row> 被认为是无效的内容，因此在渲染的时候会导致错误。变通的方案是使用特殊的 is 属性：

<table><tr is="my-row"></tr>
</table>  

应当注意，如果您使用来自以下来源之一的字符串模板，这些限制将不适用：

• <script type="text/x-template">

• JavaScript 内联模板字符串

• .vue 组件

data必须是函数

<div id="app"><table><tr is="component-tr"></tr><tr is="component-tr"></tr><tr is="component-tr"></tr><tr is="component-tr"></tr></table>
</div>
<script type="text/x-template" id="tpl1"><tr><td>{{msg}}</td><td>2</td><td>3</td><td>4</td></tr>
</script>
<script>Vue.compnentIr={template:'#tpl1',data:function{return{msg:'helloworld'}}};var vm=new Vue({el:'#app1',});</script>  

组件通讯

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

父子通讯

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

prop

要让子组件使用父组件的数据，我们需要通过子组件的 props 选项。

Vue.component('child', {// 声明 propsprops: ['message'],// 就像 data 一样，prop 可以用在模板内// 同样也可以在 vm 实例中像“this.message”这样使用template: '<span>{{ message }}</span>'
})    <child message="hello!"></child>

camelCased vs kebab-case

HTML 特性是不区分大小写的。所以，当使用的不是字符串模板，camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名：

Vue.component('child', {// camelCase in JavaScriptprops: ['myMessage'],template: '<span>{{ myMessage }}</span>'
})  <!-- kebab-case in HTML -->
<child my-message="hello!"></child>  

动态prop

要动态地绑定父组件的数据到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。

<div><input v-model="parentMsg"><br><child v-bind:my-message="parentMsg"></child>
</div>  

子父传递数据 (emit)

每个 Vue 实例都实现了事件接口 (Events interface)，即：

• 使用 $on(eventName) 监听事件

• 使用 $emit(eventName) 触发事件

<div id="app"><tk v-bind:my-message="msg"></tk><tk msg="helloworld2" v-on:jieshou="jieshoufn"></tk></div>
<script type="text/x-template" id="tkTpl"><div><input type="button" @click="alertMsg" value="弹框"/></div>
</script>
<script>var tkTpl={template:'#tkTpl',props:['myMessage'],methods:{alertMsg:function(){alert(this.myMessage);this.$emit("jieshou","abc","def");}}};var vm=new Vue({el:'#app',compnents:{tk:tkTpl},data:{msg:"hello vue"},methods:{jieshoufn:function(){alert(2);}}});</script>  

非父子组件通信

有时候两个组件也需要通信 (非父子关系)。在简单的场景下，可以使用一个空的 Vue 实例作为中央事件总线：

var bus = new Vue()  // 触发组件 A 中的事件
bus.$emit('id-selected', 1)  // 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {// ...
})      

<div id="app"><tk v-bind:my-message="msg"></tk><panel-tpl></panel-tpl>
</div>
<script type="text/x-template" id="tkTpl"><div><input type="button" @click="alertMsg" value="弹框"/></div>
</script>
<script>var bus=new Vue();var tkTpl={template:'#tkTpl',props:['myMessage'],methods:{alertMsg:function(){bus.$enit("passid",1,2);}}};var panelTpl={template='<div>{{id}}</div>',data:function(){return{id:0};},mounted:function(){var that=this;bus.$on("passid",function(arg1,arg2){this.id=arg1+arg2;});}}var vm=new Vue({el:'#app',compnents:{"tk":tkTpl,},data:{msg:"hello vue"},});</script>
## 使用slot分发内容  
注意两点：  1.<app> 组件不知道它会收到什么内容。  这是由使用 <app> 的父组件决定的。  2.<app> 组件很可能有它自己的模板。

<style>

    .box{margin: 10px;width: 150px;border: 1px solid #ccc;}.box-header, .box-footer{height: 30px;background: sandybrown;}.box-body{min-height: 100px;}
</style>

<body>

<div class="exp"><box><h2 slot="title">Slot内容分发<h2><p>为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为 内容分发 (或 “transclusion” 如果你熟悉 Angular)。Vue.js 实现了一个内容分发 API，参照了当前 Web 组件规范草案，使用特殊的 <slot> 元素作为原始内容的插槽。</p><p slot="foot">分发完成</p></box>
</div><script type="text/x-template" id="tmp"><div class="box"><div class="box-header"><slot name="title"></slot></div><div class="box-body"><slot></slot></div><div class="box-footer"><slot name="foot"></slot></div></div>
</script>
<script>var box={template:"#tmp",}new Vue({el:'.exp',components:{"bilibili":box}})
</script>

</body>