1.全局组件注册后,任何 Vue 实例都可以使用 2.组件其实也是一个 Vue 实例,因此它在定义时也有:data、methods、生命周期函数等 3.不同的是组件不会与页面的元素绑定,否则就无法复用了,因此没有 el 属性。 4.但是组件渲染需要 html 模板,所以增加了 template 属性,值就是 HTML 模板,模板中只能有一个根标签 5.data 必须是一个函数,不再是一个对象。因此组件复用时各个组件之间互补影响。
语法 Vue.component("组件名称", { })
示例
局部组件只有在当前注册它的 Vue 实例中使用
语法
示例
父组件发送的形式是以属性的形式绑定值到子组件身上。 然后子组件用属性 props 接收 在 props 中使用驼峰形式,html 中需要使用短横线的形式字符串形式的模板中没有这个限制
<div id="app">
<first :str="msg" :tit="title"></first>
</div>
<script>
var first = {
props: ["str","tit"],
template:'<h1>{{tit}} {{str}}</h1>',
data(){
return {
count:0
}
}
}
var app = new Vue({
el:"#app",
data: {
msg: "父向子通信",
title: "No.1"
},
components: {
first
}
});
</script>
子组件不能直接向父组件传值,我们可以通过操作父组件的方法来实现通信 子组件用 $emit() 触发事件 父组件使用 v-on 来监听事件
<div id="app">
父组件:{{num}}
<!-- 父组件监听子组件 add-num 事件,使用 add 方法处理此事件,可以使用 add($event) 来接收参数 -->
<first :num="num" @add-num="add"></first>
</div>
<script>
var first = {
props: ["num"],
template:'<div> 子组件:{{num}} <button @click="fun">加</button> </div>',
methods: {
fun() {
<!-- 子组件用 $emit("事件名称", "参数(可无)") 触发事件 add-num -->
this.$emit("add-num");
}
}
}
var app = new Vue({
el:"#app",
data: {
num: 10
},
components: {
first
},
methods: {
add() {
this.num ++
}
}
});
</script>
兄弟之间传递数据需要借助于事件中心,通过事件中心传递数据。事件中心 var hub = new Vue() 传递数据方,通过 hub.$emit(方法名,参数) 触发事件 接收数据方,通过在 mounted 钩子中用 hub.$on(方法名,(参数)=> {}) 监听事件 销毁事件通过 hub.$off(方法名) 进行销毁,销毁之后无法进行传递数据
<div id="app">
<first></first>
<last></last>
</div>
<script>
// 事件中心
var hub = new Vue();
// 组件1:first
Vue.component("first", {
template:'<div> fist 组件:{{num}} <button @click="fun">last组件+1</button> </div>',
data() {
return {
num: 0
}
},last
methods: {
fun() {
hub.$emit("last-event",1);
}
},
mounted () {
// 此处需要使用箭头函数,否侧 this 不代表组件
hub.$on("first-event",(value) => {
this.num += value;
})
}
});
// 组件2:last
Vue.component("last", {
template:'<div> last 组件:{{num}} <button @click="fun">first组件+2</button> </div>',
data() {
return {
num: 0
}
},
methods: {
fun() {
hub.$emit("first-event",2);
}
},
mounted() {
hub.$on("last-event",(value) => {
this.num += value;
})
}
});
var app = new Vue({
el:"#app"
});
</script>