全局组件
html代码
<div id="app">
<!-- 使用自定义组件 -->
<my-home></my-home>
</div>
<!-- 模板 -->
<template id="home">
<div>
<span>我是组件</span>
</div>
</template>
js代码
<!-- 声明模板 -->
var Home = {
template: "#home"
};
<!-- 注册全局组件 -->
Vue.component("my-home", Home);
new Vue({
el: "#app",
});
局部组件
html代码
<div id="app">
<my-home></my-home>
</div>
<template id="home">
<div>
<span>我是组件</span>
</div>
</template>
js代码
var Home = {
template: "#home"
};
new Vue({
el: "#app",
/* 注册局部组件 */
components: {
"my-home": Home
}
});
非父子组件之间的通信
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
html代码
<div id="app">
<com-a></com-a>
<com-b></com-b>
<com-c></com-c>
</div>
<!-- 模板com-a -->
<template id="com-a">
<div>
<span>我是A组件</span>->{{a}}
<input type="button" value="把A数据给C" @click="change">
</div>
</template>
<!-- 模板com-b -->
<template id="com-b">
<div>
<span>我是B组件</span>->{{a}}
<input type="button" value="把B数据给C" @click="rang">
</div>
</template>
<!-- 模板com-c -->
<template id="com-c">
<div>
<span>我是C组件</span>->{{a}}->{{b}}
</div>
</template>
js代码
<!-- 创建一个空的vue实例中央事件总线 -->
var Event = new Vue();
var A = {
template: '#com-a',
data(){
return {
a: '我是A数据'
}
},
methods: {
change(){
<!-- 触发a-data -->
Event.$emit('a-data',this.a)
}
}
};
var B = {
template: '#com-b',
data(){
return{
a: '我是B数据'
}
},
methods: {
rang(){
<!-- 触发b-data -->
Event.$emit('b-data',this.a)
}
}
};
var C = {
template: '#com-c',
data(){
return {
a: '',
b: ''
}
},
mounted(){
var _self = this;
<!-- 监听a-data -->
Event.$on('a-data',function(a){
_self.a = a;
});
<!-- 监听b-data -->
Event.$on('b-data',function(a){
_self.b = a;
});
}
};
var vm = new Vue({
el: '#app',
components: {
'com-a': A,
'com-b': B,
'com-c': C
}
});
父子组件
html代码
<div id="app">
<fa-tem></fa-tem>
</div>
<!-- 父组件 -->
<template id="father_tem">
<div>
<span>我是父组件</span>
<ch-tem></ch-tem>
</div>
</template>
<!-- 子组件 -->
<template id="child_tem">
<div>
<span>我是子组件</span>
</div>
</template>
js代码
new Vue({
el: "#app",
components: {
"fa-tem": {
template: "#father_tem",
components: {
"ch-tem": {
template: "#child_tem"
}
}
}
}
});
父子组件之间的通信
子组件要显式地用 props 选项声明它期待获得的数据:
使用 v-bind,每当父组件的数据变化时,该变化也会传导给子组件
html代码
<div id="app">
<fa-tem></fa-tem>
</div>
<!-- 父组件 -->
<template id="father_tem">
<div>
<span>我是父组件</span>->{{a}}
<!-- 在使用子组件时需要将父组件的数据和子组件绑定 -->
<ch-tem :msg="a"></ch-tem>
</div>
</template>
<!-- 子组件 -->
<template id="child_tem">
<div>
<span>我是子组件</span>->{{msg}}
</div>
</template>
js代码
new Vue({
el: "#app",
components: {
"fa-tem": {
data(){
return{
a: "hello"
}
},
template: "#father_tem",
components: {
"ch-tem": {
<!-- 使用props将父组件的数据传递给子组件 -->
props: ['msg'],
template: "#child_tem"
}
}
}
}
});
slot分发内容
<slot> 元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素。
html代码
<div id="app">
<slot-a>
<!-- 使用具名slot aaa 这时数据使用本身的数据 -->
<h1 slot="aaa">11</h1>
<!-- <h1 slot="bbb">22</h1> -->
</slot-a>
</div>
<template id="slot_a">
<div>
<!-- 具名slot aaa -->
<slot name="aaa">我是aaa数据</slot>
<!-- 具名slot bbb -->
<slot name="bbb">我是bbb数据</slot>
<span>我是默认数据</span>
</div>
</template>
js代码
new Vue({
el: "#app",
components: {
"slot-a": {
template: "#slot_a"
}
}
});