组件注册：

注册语法（全局注册）：全局组件注册后，任何vue实例都可以用

Vue.component('组件名称', { data: 组件数据， template: 组件模板内容 }）

定义一个名为button-counter例子:

<script type="text/javascript"> Vue.component('button-counter',{ //第一个参数是组件名称 vue.component是api data:function(){ //第二个参数是一个对象 第一个属性一个属性是data：值必须是一个函数，同时这个函数要求返回一个对 象，函数里提供具体的对象，放需要的数据 如果不需要数据 可以省略data这个属性 return { count:0 } }, template:'<button @click="handle">点击{{count}}次</button>', //第二个属性是模板内容 内容是‘字符串 vue支持的模板语法’ 绑定的事件要双引号，因为外面是单引号 methods: { handle:function(){ this.count += 2; //count++ } } }) var vm = new Vue({ //vue实例也是一个组件 顶层组件 el:'#app', data: { } }) </script>

组件用法：

<div id="app"> <!-- 用组件的名称放到容器里来使用组件 因为在app里面所以也是子组件--> <button-counter></button-counter> </div>

注册注意事项：

data必须是函数 VUE实例data是对象 本质也是组件. 组件都是一个独立的实例， 函数会形成闭包 每个组件拥有独立的数据组件模板内容必须是单个根元素 必要情况下可以最外面加div盒子组件模板内容可以是模板字符串复杂的情况下 用字符串 反引号··（需要浏览器的支持，因为是es6语法）如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，但是 在普通的标签模板中，必须使用短横线的方式使用组件，因为不识别大小写.

局部注册：只能在当前注册它的vue实例（父组件）中使用

var Child = { template: '<div>hello</div>' } var vm = new Vue({ el:"" components: { 'my-component':Child //components注册局部组件 } })

Vue组件之间传值

父组件向子组件传值

父组件发送的形式是以属性的形式绑定值到子组件身上。然后子组件用属性props接收 props传递数据类型：单向数据流属性命名:在props中使用驼峰形式，标签模板中需要使用短横线的形式，字符串形式的模板中没有这个限制属性值类型：基本类型字符串数字布尔 要用v-bind绑定 如果不用v-bind就都是字符串类型了 还有复杂类型数组和对象. 父组件通过属性将值传递给子组件 <div id="app"> <div>{{pmsg}}</div> <!-- 给子组件传入一个静态的值 --> <menu-item title='来自父组件的值'></menu-item> <!-- 2、 需要动态的数据的时候 需要属性绑定的形式设置 此时 ptitle 来自父组件data 中的数据 . 传的值可以是数字、对象、数组等等 --> <menu-item :title='ptitle' content='hello'></menu-item> </div> <script type="text/javascript"> Vue.component('menu-item', { // 子组件用属性props **接收** 父组件传递过来的数据 props是个数组 props: ['title', 'content'], data: function() { return { msg: '子组件本身的数据' } }, template: '<div>{{msg + "----" + title + "-----" + content}}</div>' //接受数据后就能在模板上使用数据 }); var vm = new Vue({ el: '#app', data: { pmsg: '父组件中内容', ptitle: '动态绑定属性' } }); </script>

子组件向父组件传值

子组件用$emit()触发事件$emit() 第一个参数为 自定义的事件名称 第二个参数为需要传递的数据父组件用v-on 监听子组件的事件props是单向数据流，只能父组件向子组件传值，而不允许子组件直接操作父组件的数据.

子组件通过自定义事件向父组件传递信息

Vue.component('menu-item', { props: ['parr'], template: ` <div> <button @click='$emit("enlarge-text", 5)'> </button> </div> ` }); // 子传父，一定要定义一个@click=“函数1” 子传父一定是一个自定义事件 子组件触发一个事件 父组件去监听这个事件 子组件触发了 父组件就接收到了 //函数体内，代码片段要写$emit（'自己取的事件名'，子组件内的参数） 事件名是要被父组件监听的 //在父组件模板里 @事件名=“函数2（$event）” $event接收的是子组件内的参数

父组件监听子组件的事件

<menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>

兄弟之间的传递

兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据提供事件中心 var hub = new Vue()传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)接收数据方，通过mounted(){} 钩子中 触发hub.$on()方法名销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据

Ref

ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例 注意：只要想要在Vue中直接操作DOM元素，就必须用ref属性进行注册

子传父简单办法： 在子组件标签上添加ref='name'属性，父组件实例中添加$refs属性就可以访问到data数据了

<div id="app"> <my-com ref="com1"></my-com> </div> <template id="tem"> <div> <h1>我是组件1</h1> </div> </template> <script> Vue.component('myCom',{ template:"#tem", data(){ return { name:'你抓到我了么？？？' } } }) const vm = new Vue({ el:'#app', mounted() { console.log(this.$refs.com1.name); } }) </script>

父传子简单方法： $parent:子组件可以直接获取到该子组件的父组件的实例对象

<div id="app"> <my-com></my-com> </div> <template id="tem"> <div> <h1>我要在子组件中显示一下父组件的msg : {{ $parent.msg }}</h1> </div> </template> <script> Vue.component('myCom',{ template:"#tem", mounted(){ // $parent 可以让子组件 直接获取到 改子组件的父组件实例对象 console.log(this.$parent.msg) //直接拿到父组件的msg属性了 } }) const vm = new Vue({ el:'#app', data:{ msg:'我是父组件' } }) </script>

组件插槽

组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力正常情况下,<Child><span style=”color:red;”>hello world</span></Child>在组件标签Child中的span标签会被组件模板template内容替换掉，当想让组件标签Child中内容传递给组件时需要使用slot插槽；通俗讲就是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中位置），当插槽也就是坑有命名时，组件标签中使用属性slot=”mySlot”的元素就会替换该对应位置内容

匿名插槽

<div id="app"> <!-- 这里的所有组件标签中嵌套的内容会替换掉slot 如果不传值 则使用 slot 中的默认值 --> <alert-box>有bug发生</alert-box> <alert-box>有一个警告</alert-box> <alert-box></alert-box> </div> Vue.component('alert-box', { template: ` <div> <strong>ERROR:</strong> //当组件渲染的时候，这个 <slot> 元素将会被替换为“组件标签中嵌套的内容”。 // 插槽内可以包含任何模板代码，包括 HTML <slot>默认内容</slot> </div> ` });

具名插槽

具有名字的插槽使用 < slot> 中的 “name” 属性绑定元素具名插槽的渲染顺序，完全取决于模板，而不是取决于父组件中元素的顺序通过slot属性来指定, 这个slot的值必须和下面slot组件得name值对应上如果没有匹配到 则放到匿名的插槽中< template>< /template>适用的场景是 多条文本填充到插槽中，也就是插槽中有多个标签插槽名字标注到标签上 只能有一个

作用域插槽

父组件对子组件加工处理既可以复用子组件的slot，又可以使slot内容不一致