<!-- 父组件 -->
<div id="app">
<h1>这是父组件里面的msg：{{msg}}</h1>
<!-- 把msg传入给子组件 -->
<!-- 自定义事件不要写成驼峰命名 因为浏览器会全部解析成小写 -->
<child :cmsg="msg" :list="list" @childchange="ctrl" @listchange="listchange"/>
</div>
<!-- 子组件 -->
<template id="child">
<div>
<h1 @click="change">{{cmsg}}</h1>
<ul>
<!-- 点击li 改变相对应的li中的数据 改成 'xxxxxxx' -->
<li v-for="(v,i) in list" :key="i" @click="fn(i)" :style="{'textDecoration': v.flag?'line-through':''}">{{v.content}}</li>
</ul>
<h2>{{msg}}</h2>
</div>
</template>
<script src="./vue.min.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:"任务列表",
list:[]
},
methods:{
listchange(i){
console.log(i)
/* 先给数组的所有对象加上flag属性 值为false */
this.list.forEach(r=>{r.flag=false})
/* 再把选中的莫一项的flag改成true */
// this.list[i].flag = true;
/* ★vue2的缺陷 不可以给对象里面添加属性
可以添加 但是 页面不会渲染响应的结果 */
/* $set的三个参数 第一个参数是目标对象 this.list */
/* 第二个参数 是目标参数的索引 */
/* 第三个参数 是具体要修改的内容 */
this.$set( this.list, i,{content:this.list[i].content,flag:true})
console.log(this.list)
/* 第一种修改方法 */
// this.list[i].content = 'xxxxxx'
/* 数组的方法splice三个参数的作用 第一个是 索引从哪里开始
第二个是从当前的索引删除几个 第三个参数是 添加的内容*/
/* 第二种修改方法 */
// this.list.splice(i,1,{content:'xxxxx'})
/* 删除具体的某一个 */
// this.list.splice(i,1)
},
ctrl(v){
// console.log(v,b,c)
console.log(v.value1)
console.log(v.value2)
console.log(v.value3)
this.msg = v.value1;
}
},
created(){
setTimeout(()=>{
this.list = [{
content:"卷王涛涛长时间坐电脑面前导致腰间盘突出"
},{
content:"某学生深夜还在学习感动了老师"
},{
content:"某女同学上课打瞌睡影响了学习"
}]
},500)
},
components:{
child:{
template:"#child",
/* 子组件使用props使用cmsg来接收 简写的方式 */
// props:['cmsg','list']
/* 全面的写法 有默认值的写法 */
props:{
cmsg:{
type:String,
default:'默认值'
},
list:{
type:Array,
default:[{content:"xxxx"},{content:"xxxx"}]
}
},
/* 如果这样写的和父组件一样 都是对象 会对父组件的data的内容造成污染 */
// data:{
// msg:'我是child的人'
// }
/* data采用函数的方式 会产生局部作用域 里面的数据是组件私有的不会对全局造成影响
怎么获取数据呢？采用return 一个对象的方式来获取组件里面的数据 */
data:function(){
return {
msg:'我是child的人'
}
},
created(){
console.log(this.cmsg)
},
methods:{
fn(i){
this.$emit('listchange',i)
},
change(){
/* 在子组件里面直接改父组件的值 是不可以的
因为违反了 Vue里面的单向数据流的原理（类似于瀑布）
直接改在父组件里面的数据还是没有被改变*/
// this.cmsg = '子改父'
/* 子改父的步骤 */
/* ①使用Vue里面的$emit方法发送一个自定义事件childchange */
/* ②在组件上使用@childchange="ctrl" 绑定自定义事件 触发父组件的ctrl方法*/
/* ③在父组件中的ctrl方法内把父组件的msg的值给改了 */
/* 传多个可以在后面加参数 */
// this.$emit('childchange','子改父','baba','erzi')
this.$emit('childchange',{value1:'子改父',value2:'爸爸',value3:'儿子'})
}
}
}
}
})
/* 父组件有个数组格式如下
[{content:'xxxx'},{content:'xxxx'},{content:'xxxx'}]
传给子组件来渲染出来*/
</script>
