@用Vue组件实现购物车复选框功能模块_用vue组件实现购物车案例-CSDN博客

本文链接：https://blog.csdn.net/topreventalife/article/details/102965810

生命周期

Vue实例存活的一个过程
创建（Vue实例）
前 beforeCreate
后 created
挂载（Dom没有在页面上显示）
前 beforeMount
后 mounted
更新（data）
前 beforeUpdated
后 updated
销毁（Vue实例）
前：beforeDestroy
后：destroyed
created
去改变data中的数据
在这个生命周期函数中获取数据
mounted
在这做页面渲染完成后的操作

数组/对象的数据响应式

Vue.set
vm.$set
数组（通过索引改变数组）
vm.$set（[数组]，[索引]，[值]）
对象（对象中添加新属性）
vm.$set（【对象】，【key】，【值】）

组件简单数据交互（兄弟）

单独的事件中心管理组件间的通信
var eventHub = new Vue（）
`var cart1={

 		data:function(){
 		return {status:false}
 	}，
 	template:`<a href="" class="del" @click.prevent="del(item.id)">删除</a>`
 	methods:{
 			handle:function(){
 					console.log(this.status)
 					hub.$emit('theadcbx',status)
 				}
 	}，
 	mounted:function(){
 			// 监听自己的事件  val属于兄弟组件传来的值
 			hub.$on('tbodycbx',(val)=>{
 				console.log(val)
 				this.status=val
 			})
 		}

var cart2={
			data:function(){
				return {
					state:false
				}
			},
			methods:{
					handle2:function(){
					console.log(this.state)
					hub.$emit('tbodycbx',this.state)
				}
			},
			template:`
					<tr>
						<th class="col0">
							<input type="checkbox" v-model="state" @change="handle2" id="selectAll"/>
						</th>
						<th class="col1">商品名称</th>
						<th class="col2">商品信息</th>
						<th class="col3">单价</th>
						<th class="col4">数量</th>
						<th class="col5">小计</th>
						<th class="col6">操作</th>
					</tr>
				`,
			mounted:function(){
				hub.$on('theadcbx',(val)=>{
					console.log(val)
				})
			}
	}