vue之组件注册，组件切换，组件传值

组件注册

全局组件：

全局组件创建第一种方法：

js:
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {data: function () {return {count: 0}},// 使用这种方法注册组件时，内容必须在同一个根元素下，否则会报错template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
// 定义一个名为 mybutton2 的新组件
Vue.component('mybutton2',{template:'<button>click me</button>'
})
var ex1 = new Vue({ el: '#components-demo' })
html:
<div id="components-demo"><button-counter></button-counter><mybutton2></mybutton2>
</div>

这个例子中，一定要注意先定义组件然后在创建vue实例，这也是创建组件的第一种方式。否则既不会报错，页面也没有显示。
全局组件特点：

全局组件可以多次复用
多个全局组件在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中
如果用到data,必须写成函数的形式例如data:function() {return {原本data中应该放着的内容}},，否则它的数据可能会被共享，一改全改
因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
组件的起名有讲究：在js中你可以用“…-…”或驼峰法命名，但是HTML里支持第一种，若js中用了第二种，则HTML在大写位置前插入“-”并将大写字母改为小写（这个坑一度让我以为起名是种玄学，时好时坏）
使用这种方法注册组件时，内容（template里的HTML)必须在同一个根元素下，否则会报错

全局组件创建第二种方法： 还可以使用extend，如下例：

var com1 = Vue.extend({template:'<button>click me</button>'})
Vue.component('myP',com1)
//或者简化为
Vue.component('myP',Vue.extend({template:'<button>click me</button>'}))
// 引用时的标签就是<my-p></my-p>

全局组件创建第三种方法：在HTML被控制的元素之外创建template标签

HTML：<template id="tst"><div>A custom </div></template>
js:Vue.component('test1',{template:'#tst'})var em1 = new Vue({el:"#example1",// data:{// }})

全局组件可以在任何一个vue实例中使用，就算你和我new多少个实例都可以通用这些组件。

局部组件：

局部组件的两种创建形式：2019/5/16

html:
<div id="example2"><com-a></com-a><com-b></com-b></div>
js:
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
var em2 = new Vue({el:"#example2",data:{msg:'haha',cnt:0},....可以加若干vue内部指令components:{//com-a,com-b就是自定义元素的名字//组件名称：组件模版对象//可以只写 组件对象自变量，就是默认名称和对象同名'com-a':componentA,/*或者直接写componentA内部代码片段*/'com-b':componentB}....可以加若干生命周期函数})

html:<div id="example3"><login></login></div>
js:
var em3 = new Vue({el:"#example3",components:{//com-a,com-b就是自定义元素的名字login:{template:'<h1>可口可乐</h1>'}}})

或者：

html:<div id="example3"><login></login></div>template:
<template id="lizi"><h1>可口可乐</h1>
</template>
js:
var em3 = new Vue({el:"#example3",components:{//com-a,com-b就是自定义元素的名字login:{template:'#lizi'}}})

上述所有方法中的template部分都可以在js,html这些标签外写，把需要的HTML内容写入其中，然后JS中template：后直接加"#XXX"亦可以，像局部组件第二个例子里一样

其实描述的有些复杂了，总的来说，全局使用的都是Vue.component来定义组件，局部都是使用components属性来定义组件，记住这点就可以把前面的知识点捋清楚了！另外，给组件只是为了可以用标签的方式引用这些组件而已。

组件切换2019/5/18

第一种方式（使用v-if，v-else）

html:
<div id="example4"><a href="" @click.prevent="flag = true">登录</a><a href="" @click.prevent="flag = false">注册</a><login v-if="flag"></login><register v-else="flag"></register></div>
js://组件切换Vue.component('login',{template:'<h2> 登录</h2>'})Vue.component('register',{template:'<h2> 注册</h2>'})var em4 = new Vue({el:'#example4',data:{flag:true}})

缺陷： 由于v-if,v-else的局限性，切换组件的个数没法太多

第二种方式（使用component:is="…"）

vue提供了component标签来展示对应名称的组件，component是一个占位符， :is 属性可以用来指定要展示的组件的名称，引号里的内容被解析为表达式，若要表达出字符串的意思需要内嵌另一种引号

html:
<div id="example4"><a href="" @click.prevent="name='login'">登录</a><a href="" @click.prevent="name='register'">注册</a><component :is='name'></component><!-- 如果仅仅想表达名为login的组件则写为:is="'login'"，就是刚刚说的内嵌另一种引号的意思 --></div>js://组件切换Vue.component('login',{template:'<h2> 登录</h2>'})Vue.component('register',{template:'<h2> 注册</h2>'})var em4 = new Vue({el:'#example4',data:{name:'login'// 默认为登录}})

组件切换动画：

相当简单，与上一步的变化只有把component标签用transition包起来，加上 mode属性（设置切换方式）和适当的css即可

css:<style>.v-enter,.v-leave-to{opacity: 0;transform: translateX(200px);}.v-enter-active,.v-leave-active{transition: all 0.5s ease;}</style>
html:<div id="example4"><a href="" @click.prevent="name='login'">登录</a><a href="" @click.prevent="name='register'">注册</a><transition mode='out-in'><component :is='name'></component></transition></div>  js://组件切换Vue.component('login',{template:'<h2> 登录</h2>'})Vue.component('register',{template:'<h2> 注册</h2>'})var em4 = new Vue({el:'#example4',data:{name:'login'}})

组建传值

组件传值时，我们会用到prop这个东西，到这里我们依然要一定小心HTML的特性就是大小写不敏感，浏览器会把所有的大写字符解析成小写，还总是不报错也不提醒，我已经在这里栽过两跤，每次改bug都耗去了大量的时间和精力，因此放在前面特此提醒。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名，我觉得更好的方法是避免使用驼峰法！！！

Prop类型

我们可以以字符串数组的形式列出prop，但是更推荐的格式是以对象的方式来列出，这不仅为你的组件提供了文档，还会在它们遇到错误的类型时从浏览器的 JavaScript 控制台提示用户。

接下来我们来看Vue常用的三种传值方式————

父组件把data传给子组件

<body><div id='ex1'><com1 v-bind:parentmsg='msg'></com1></div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>var vm = new Vue({el:'#ex1',data:{msg:'父组件的值'},methods:{},components:{com1:{template:'<h1>子组件的值和  {{parentmsg}}</h1>',props:['parentmsg']}}})
</script>

解析上例：

如果在子组件中直接访问父组件data或methods的值的话，默认是无法访问成功的
子组件如果自己有data的话，它并不是父组件传来的，而是其自身私有的，它是又可读又可写的
而子组件中props中的数据都是父组件传给子组件的，它只是可读的
父组件传来的东西，必须先在props数组中进行定义以后才能使用，如props:['parentmsg']，props是一个数组，可以传多个值，它是只读的
父组件在引用子组件时，通过v-bind的形式，将需要的传递给子组件的数据，以属性绑定的形式供子组件使用，如：<com1 v-bind:parentmsg='msg'></com1>

父组件把methods传给子组件

<body><div id='ex1'><com2 v-on:thefunction="show"></com2></div><template id="fun"><div>//只能有一个根喔<h2>宝宝是个自组件</h2><input type="button" value="click" @click="myclick"></div></template>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>var com2 = {//定义一个字面量类型的组件模版对象template:'#fun',methods:{myclick(){console.log('ok');// 用$emit触发父组件的方法this.$emit('thefunction',123)//触发调用}}}var vm = new Vue({el:'#ex1',methods:{show(data){console.log('父组件的show方法'+data)}        },components:{com2}})
</script>

解析上例：

第一步，定义一个名为com2子组件，其父组件（Vue实例）中有方法show
父组件向子组件传递方法使用的是事件绑定机制，如例子中的<com2 v-on:thefunction="show"></com2>接下来我们的子组件就能通过某些方式来调用传进去的方法了
当子组件有自己的myclick方法，通过this.$emit('thefunction',123)就可以触发调用父组件的方法
若父组件的方法有参数列表，我们可以在this.$emit('thefunction',123,参数....)后继续追加参数列表