【Vue_02】 组件化开发
一、组件注册
1. 全局组件
1.全局组件注册后，任何 Vue 实例都可以使用 2.组件其实也是一个 Vue 实例，因此它在定义时也有：data、methods、生命周期函数等 3.不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有 el 属性。 4.但是组件渲染需要 html 模板，所以增加了 template 属性，值就是 HTML 模板，模板中只能有一个根标签 5.data 必须是一个函数，不再是一个对象。因此组件复用时各个组件之间互补影响。
语法 Vue.component("组件名称", { })
示例
2. 局部组件
局部组件只有在当前注册它的 Vue 实例中使用
语法
示例
二、组件之间的通信
1. 父向子通信
父组件发送的形式是以属性的形式绑定值到子组件身上。 然后子组件用属性 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>
在这里插入图片描述
2. 子向父通信
子组件不能直接向父组件传值，我们可以通过操作父组件的方法来实现通信 子组件用 $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>
在这里插入图片描述
3. 兄弟间通信
兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据。事件中心 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> 
在这里插入图片描述
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
