Vue 组件的通信
组件通信
父->子(在子组件中使用父组件数据) props : 不可修改 单向数据传递 子->父(在父组件中使用子组件数据) 自定义事件! 兄弟组件
组件让我们提高了代码的复用性,接下来考虑如何在不同的组件中进行传值 比如: 父组件有items数组 在子组件中使用父组件中的items数组去渲染列表
父子组件通信
目的: 要在子组件中使用父组件中data中的属性值 关键点:通过Props给子组件传值 步骤:
- 在子组件中通过props声明自定义属性title
- 注册局部组件
- 使用子组件时,设置props选项, 通过自定义属性获取父组件的值
<div id="app">
<!-- 3. 使用子组件时,通过动态绑定自定义属性获取父组件的值 -->
<component-a :title="msg" :lists="items"></component-a>
</div>
<script src="./vue.js"></script>
<script>
var ComponentA = {
// 1. 在子组件中通过props声明自定义属性title
template: `<div>
<h1>{{ title }}</h1>
<ul>
<li v-for="item in lists">
{{item.name}}
</li>
</ul>
</div>`,
// 用来接收外部传过来的数据
// 值的传递是单向的，内部不要修改props里变量的值
props: ['title', 'lists']
};
new Vue({
el: '#app',
// 目的: 要在子组件中使用父组件的msg的值
data: {
msg: 'hello heima',
items: [{
'id': 1,
'name': '小狗'
}, {
'id': 2,
'name': '小猫'
}, {
'id': 3,
'name': '小羊'
}
]
},
// 2. 注册局部组件
components: {
'component-a': ComponentA
}
});
</script>父子组件的传值有多种方法, 兄弟组件的通信也有自己的写法 避免混淆,这里我们先只讲父子组件通信的一种写法 会在后续的案例中会进行讲解
组件和模块
- 模块：侧重于功能或者数据的封装
- 组件：包含了 template、style 和 script，而它的 script 可以由各种模块组成
生命周期是指Vue实例或者组件从诞生到消亡经历的每一个阶段，在这些阶段的前后可以设置一些函数当做事件来调用。
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Vue的生命周期'
},
beforeCreate: function() {
console.group('------beforeCreate创建前状态------');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function() {
console.group('------created创建完毕状态------');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function() {
console.group('------beforeMount挂载前状态------');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function() {
console.group('------mounted 挂载结束状态------');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
</script>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-10-29，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
