初始化方式
1
2
3
| Vue.component("com1",{
template:``,
});
|
- 首先在component里面注册组件
- 然后在组件里面使用
过程
- 在components里面注册组件
- 写组件的名字
- 写组件模版的名字
- 定义组件模版
- 定义组件参数变量名字
- 在模版里面写使用变量的位置
- 应用过程中用:变量，来使用
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
| <div id="app">
<axian :sayhi="msg"></axian>
</div>
<template id="axian">
<div>
<p>你好</p>
<h1>{{sayhi}}</h1>
</div>
</template>
<script src="./vue.js"></script>
<script>
Vue.config.productionTip=false;
const app=new Vue({
el:'#app',
data:{
msg:"hello",
},
components:{
axian:{
template:"#axian",
props:["sayhi"],
},
}
});
</script>
|
slot插槽，如果要扩展模版，需要插槽
- 如果不指定的话就是全插
1
2
3
4
5
6
7
8
9
| <template id="axian">
<div>
<p>你好</p>
<h1>{{sayhi}}</h1>
<slot></slot>
<slot></slot>
<slot></slot>
</div>
</template>
|
动态插槽
在模版里定义插槽的名字来进行动态插入内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <axian :sayhi="msg">
<template v-slot:aa>
<button>aa</button>
</template>
<template v-slot:bb>
<button>bb</button>
</template>
</axian>
<template id="axian">
<div>
<p>你好</p>
<h1>{{sayhi}}</h1>
<slot name="aa"></slot>
<slot name="bb"></slot>
</div>
</template>
|
data(){}
为了给每个组件新增自定义的数据，开辟一个新的空间
子父组件数据传递
- 组件里绑定一个自定义属性，该属性可以触发父亲的函数
- 组件里绑定点击事件
- 事件对应一个方法
- 该方法激活组件里的自定义属性
this.$emit
子组件点击事件->子组件函数->自定义属性->父组件函数
npm i aa -save
将依赖包添加到文件里
