局部组件
局部组件 只有在挂载的区域使用 例如：#app这个div中
<body>
<div id="app">
<div>
<child1>
</div>
<div>
<child2 />
</div>
</div>
<script src="./vue.min.js"></script>
<script>
Vue.component('child2',{
template:'<h1>我爱学习js</h1>'
})
new Vue({
el:'#app',
components:{
child1:{
template:'<h1>我爱学习</h1>'
}
}
})
</script>
组件父子传值
<style>
.a{
text-decoration: line-through;
}
</style>
</head>
<body>
<div id="app">
<child :farr="arr" @childchange="scf"/>
</div>
<template id="child">
<div>
<h1 v-for="(item,index) in farr" @click="change(index)" :class="item.flag?'a':''">{{item.content}} </h1>
</div>
</template>
<script src="./vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
arr:[
{
// flag:false,
content:'asdsda'
},
{
// flag:false,
content:'asdsda'
},
{
// flag:false,
content:'asdsda'
}
]
},
methods:{
scf(index){
// this.arr[index].content = 'xxxxxxx'
this.arr.forEach(r => {
r.flag = false
});
this.$set(this.arr,index,{content:this.arr[index].content,flag:true})
// this.arr[index].flag = true
console.log(this.arr)
}
},
components:{
child:{
template:'#child',
props:['farr'],
methods:{
change(index){
this.$emit('childchange',index)
console.log(index)
}
}
},
}
})
</script>
</body>
总结：
<!-- 自定义事件不要写成驼峰命名 因为浏览器会全部解析成小写 -->
/* ★vue2的缺陷 不可以给对象里面添加属性
可以添加 但是 页面不会渲染响应的结果 */
/* $set的三个参数 第一个参数是目标对象 this.list */
/* 第二个参数 是目标参数的索引 */
/* 第三个参数 是具体要修改的内容 */
/* 子组件使用props使用cmsg来接收 简写的方式 */
// props:['cmsg','list']
/* 在子组件里面直接改父组件的值 是不可以的
因为违反了 Vue里面的单向数据流的原理（类似于瀑布）
直接改在父组件里面的数据还是没有被改变*/
// this.cmsg = '子改父'
/* 子改父的步骤 */
/* ①使用Vue里面的$emit方法发送一个自定义事件childchange */
/* ②在组件上使用@childchange="ctrl" 绑定自定义事件 触发父组件的ctrl方法*/
/* ③在父组件中的ctrl方法内把父组件的msg的值给改了 */
/* 传多个可以在后面加参数 */
// this.$emit('childchange','子改父','baba','erzi')
使用vue添加属性
<div id="app">
<h1>{{list}}</h1>
<button @click="fn">添加age</button>
<hr>
<h1>{{arr}}</h1>
<button @click="fn2">添加car</button>
</div>
<script src="./vue.min.js"></script>
<script>
new Vue({
el:"#app",
data:{
list:{
name:'tom'
},
arr:[{
name:'jack'
},{
name:'taotao'
}]
},
methods:{
fn(){
/* Vue2的一个缺陷不可以给对象添加新属性
解决这个bug的方案是 使用$set*/
/* this.$set(目标对象，具体的key要使用引号，具体的值) */
this.$set(this.list,'age',30)
console.log(this.list)
},
fn2(){
/* 这是更新对象数据的方式 */
// this.$set(this.arr[1],'car','bmw')
/* 这个更新数组的到视图的方式 */
/* 三个参数分别对应 目标数组 数组所在的索引 和需要修改的内容 */
this.$set(this.arr,1,{name:'taotao',car:'benchi'})
}
}
})
</script>
