- 局部组件
<script>
/* 全局组件 */
Vue.component('child',{
template:"<h1 @click='fn'>我是全局组件</h1>",
created:function(){
console.log('我是child')
},
methods: {
fn(){
console.log('child')
}
},
})
/* 全局组件 */
Vue.component('child2',{
template:"#child2"
})
new Vue({
el:"#app",
/* 注册局部组件son */
components:{
son:{
template:`<h1>我是局部组件son</h1>`,
created(){
console.log('son')
}
}
}
})
/* 总结 全局组件 放在哪里都可以使用
局部组件 只有在挂载的区域使用 例如：#app这个div中 */
/* 在#app模板写 写个局部组件 child1 显示我爱学习 使用template标签的方式
在child1里面使用全局组件child2（child2显示我爱学js）
</script>
- 组件父子传值
<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>
- 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>
