1、组件声明
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!-- 全局组件模板father模板 -->
<template id= "father" >
<div>
<h3>这是{{name}}</h1>
<div>
<p>这是{{data}}</p>
</div>
</div>
</template>
var father = {
template: "#father" ,
data: function () {
return {
name: "一个全局组件-模板-" ,
data: "数据:18892087118"
}
}
};
|
2、组件注册
vue.component('father', father);
3、组件挂载
<h5>全局组件1</h5>
<father></father>
4、组件实例
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
<!doctype html>
<html>
<head>
<title>vue2.0 --- 局部组件与全局组件</title>
</head>
<body>
<h3>vue2.0局部组件与全局组件</h3>
<div id= 'app' >
<h5>局部组件</h5>
<fatherlocal></fatherlocal>
<hr>
<h5>全局组件1</h5>
<father></father>
<hr>
<h5>全局组件2</h5>
<child :fromfather= 'givedata' ></child>
</div>
<!-- 局部组件模板fatherlocal -->
<template id= "father-local" >
<div>
<h3>这是{{name}}</h1>
<div>
<p>这是{{data}}</p>
</div>
</div>
</template>
<!-- 全局组件模板father -->
<template id= "father" >
<div>
<h3>这是{{name}}</h1>
<div>
<p>这是{{data}}</p>
</div>
</div>
</template>
<template id= "child" >
<div>
<h3>这是{{name}}</h3>
<div>
<p>{{cmsgtwo}}</p>
<p>{{cmsg}}</p>
<p>{{fromfather}}</p>
<p>{{fromfather.fmsg}}</p>
<p><input type= "button" value= "按钮" @click= " " ></p>
</div>
</div>
</template>
<script src= "vue_2.2.2_vue.min.js" ></script>
<script type= "text/javascript" >
// 定义组件
var father = {
template: "#father" ,
data: function () {
return {
name: "一个全局组件-模板-" ,
data: "数据:18892087118"
}
}
};
var child = {
template: "#child" ,
data: function () {
return {
name: "子组件" ,
cmsg: "子组件里的第一个数据" ,
cmsgtwo: "子组件里的第二个数据"
}
},
methods: {
change: function () {
this .fromfather.fmsg = "子组件数据被更改了"
}
},
mounted: function () {
this .cmsg = this .fromfather;
},
props: [ "fromfather" ],
};
// 注册组件
vue.component( 'father' , father);
vue.component( "child" , child);
var vm = new vue({
data: {
fmsg: "data里的数据" ,
givedata: {
fmsg: "这是父组件里的数据"
}
},
methods: {},
// 局部组件fatherlocal
components: {
'fatherlocal' : {
template: '#father-local' ,
data: function () {
return {
name: "局部-父组件" ,
data: "局部-父组件里的数据"
}
}
}
}
}).$mount( '#app' );
</script>
</body>
</html>
|
6、特殊的属性is
当使用 dom 作为模板时 (例如,将el选项挂载到一个已存在的元素上),你会受到 html 的一些限制,因为 vue 只有在浏览器解析和标准化 html 后才能获取模板内容。尤其像这些元素<ul>,<ol>,<table>,<select>限制了能被它包裹的元素,而一些像<option>这样的元素只能出现在某些其它元素内部。
自定义组件<my-row>被认为是无效的内容,因此在渲染的时候会导致错误。变通的方案是使用特殊的is属性:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<body>
<div id= "app1" >
<ul>
<li is= "my-component" ></li>
</ul>
</div>
<script>
vue.component( "my-component" ,{
template: "<h1>{{message}}</h1>" ,
data: function (){
return {
message: "hello world" }
}
});
new vue({
el: "#app1"
})
</script>
</body>
|
补充知识:vue组件之入门:全局组件三种定义
不论我们使用哪种方式创建出来的组件,组件中的template属性指向的模板内容中,必须有且只有一个根元素,其他元素必须在这个根元素下面。
1.使用vue.extend配合vue.component定义全局组件
在使用vue.extend配合vue.component定义全局组件时,vue.extend里面定义template模板,而vue.component里面是要注册一个组件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<body>
<div id= "app" >
<!--第三步页面中使用 -->
<!-- 如果要使用组件,直接把组件的名称以html标签的形式引入到页面中-->
<my-compnent></my-compnent>
</div>
<script>
//第一步:使用vue.extend来创建全局组件
var com1 = vue.extend({
//通过template模板的属性来展示组件要显示的html
template: '<h2>使用vue.extend创建全局组件</h2>'
});
//第二步:使用 vue.component('组件名称',创建出来的组件模板对象)
vue.component( 'mycompnent' , com1);
// 创建 vue 实例,得到 viewmodel
var vm = new vue({
el: '#app' ,
data: {},
methods: {}
});
</script>
</body>
|
【注意】在定义注册组件时,组件的名称不需要按照驼峰命名,但是在页面引入组件时,组件的名称必须按照驼峰命名。
简写如下:
2.直接使用vue.component定义全局组件
这里是直接使用vue.component直接创建一个组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<div id= "app" >
<my-com2></my-com2>
</div>
<script>
vue.component( 'mycom2' , {
template: '<h2>直接使用vue.component创建组件</h2>'
});
// 创建 vue 实例,得到 viewmodel
var vm = new vue({
el: '#app' ,
data: {},
methods: {}
});
</script>
|
3.vue外部直接定义template
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<body>
<div id= "app" >
<my-com3></my-com3>
</div>
<template id= "tmp1" >
<div>
<h2>这是通过template元素,在外部定义组件的结构,有代码的提示和高亮</h2>
</div>
</template>
<script>
vue.component( 'mycom3' , {
template: "#tmp1"
});
var vm = new vue({
el: '#app' ,
data: {},
methods: {}
});
</script>
</body>
|
以上这篇基于vue全局组件与局部组件的区别说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/qq_23334071/article/details/80687424