全局化注册组件
Vue.component('panda',{
template:`<div style="color:red;">全局化注册的jspang标签</div>`,
data: function () {
return {
count: 0
}
},
})
使用：
<panda></panda>局部注册组件局部注册组件和全局注册组件是向对应的，局部注册的组件只能在组件注册的作用域里进行使用，其他作用域使用无效。
<script type="text/javascript">
var app=new Vue({
el:'#app',
components:{
"panda":{
template:`<div style="color:red;">局部注册的panda标签</div>`
}
}
})
</script>组件和指令的区别
组件注册的是一个标签，而指令注册的是已有标签里的一个属性。
Component 标签
1.我们先在构造器外部定义三个不同的组件，分别是componentA,componentB和componentC.
|
1
2
3
4
5
6
7
8
9
|
var
componentA
=
{
template
:
`
<
div
>
I
'm componentA</div>`
}
var componentB={
template:`<div>I'
m
componentB
<
/
div
>
`
}
var
componentC
=
{
template
:
`
<
div
>
I'
m
componentC
<
/
div
>
`
}
|
2.我们在构造器的components选项里加入这三个组件。
|
1
2
3
4
5
|
components
:
{
"componentA"
:
componentA
,
"componentB"
:
componentB
,
"componentC"
:
componentC
,
}
|
3.我们在html里插入component标签，并绑定who数据，根据who的值不同，调用不同的组件。
|
1
|
<component v
-bind
:
is
=
"who"
>
</component>
|
这就是我们的组件标签的基本用法。我们提高以下，给页面加个按钮，每点以下更换一个组件。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<!DOCTYPE html>
<html
lang
=
"en"
>
<head>
<meta
charset
=
"UTF-8"
>
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>
component-4
</title>
</head>
<body>
<h1>
component-4
</h1>
<hr>
<div
id
=
"app"
>
<component v
-bind
:
is
=
"who"
>
</component>
<button
@
click
=
"changeComponent"
>
changeComponent
</button>
</div>
<script type="text/javascript">
var
componentA
=
{
template
:
`
<
div
style
=
"color:red;"
>
I
'm componentA</div>`
}
var componentB={
template:`<div style="color:green;">I'
m
componentB
<
/
div
>
`
}
var
componentC
=
{
template
:
`
<
div
style
=
"color:pink;"
>
I
'm componentC</div>`
}
var app=new Vue({
el:'
#
app
',
data:{
who:'
componentA
'
},
components:{
"componentA":componentA,
"componentB":componentB,
"componentC":componentC,
},
methods:{
changeComponent:function(){
if(this.who=='
componentA
'){
this.who='
componentB
';
}else if(this.who=='
componentB
'){
this.who='
componentC
';
}else{
this.who='
componentA'
;
}
}
}
}
)
</script>
</body>
</html>
|
Vue常用的三种传值方式有：
父传子
子传父
非父子传值
引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示：
接下来，我们通过实例来看可能会更明白一些：
1. 父组件向子组件进行传值
父组件：
<template>
<div>
父组件:
<input type="text" v-model="name">
<br>
<br>
<!-- 引入子组件 -->
<child :inputName="name"></child>
</div>
</template>
<script>
import child from './child'
export default {
components: {
child
},
data () {
return {
name: ''
}
}
}
</script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
子组件：
<template>
<div>
子组件:
<span>{{inputName}}</span>
</div>
</template>
<script>
export default {
// 接受父组件的值
props: {
inputName: String,
required: true
}
}
</script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
2. 子组件向父组件传值
子组件：
<template>
<div>
子组件:
<span>{{childValue}}</span>
<!-- 定义一个子组件传值的方法 -->
<input type="button" value="点击触发" @click="childClick">
</div>
</template>
<script>
export default {
data () {
return {
childValue: '我是子组件的数据'
}
},
methods: {
childClick () {
// childByValue是在父组件on监听的方法
// 第二个参数this.childValue是需要传的值
this.$emit('childByValue', this.childValue)
}
}
}
</script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
父组件：
<template>
<div>
父组件:
<span>{{name}}</span>
<br>
<br>
<!-- 引入子组件 定义一个on的方法监听子组件的状态-->
<child v-on:childByValue="childByValue"></child>
</div>
</template>
<script>
import child from './child'
export default {
components: {
child
},
data () {
return {
name: ''
}
},
methods: {
childByValue: function (childValue) {
// childValue就是子组件传过来的值
this.name = childValue
}
}
}
</script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
3. 非父子组件进行传值
非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。
公共bus.js
//bus.js
import Vue from 'vue'
export default new Vue()- 1
- 2
- 3
组件A：
<template>
<div>
A组件:
<span>{{elementValue}}</span>
<input type="button" value="点击触发" @click="elementByValue">
</div>
</template>
<script>
// 引入公共的bug，来做为中间传达的工具
import Bus from './bus.js'
export default {
data () {
return {
elementValue: 4
}
},
methods: {
elementByValue: function () {
Bus.$emit('val', this.elementValue)
}
}
}
</script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
组件B：
<template>
<div>
B组件:
<input type="button" value="点击触发" @click="getData">
<span>{{name}}</span>
</div>
</template>
<script>
import Bus from './bus.js'
export default {
data () {
return {
name: 0
}
},
mounted: function () {
var vm = this
// 用$on事件来接收参数
Bus.$on('val', (data) => {
console.log(data)
vm.name = data
})
},
methods: {
getData: function () {
this.name++
}
}
}
</script>