Vue局部组件
<div id="box">
<div>
<child1></child1>
</div>
<div>
<child2></child2>
</div>
</div>
<template id="fn">
<div>
<h1>我爱学习</h1>
</div>
</template>
<script src="../vue.min.js"></script>
<script>
/ 全局组件/
Vue.component('child2',{
template:'<h1>我爱JS</h1>'
})
new Vue({
el:'#box',
data:{
},
/局部组件/
components:{
child1:{
template:'#fn'
}
}
})
/* 总结全局组件放在哪里都可以使用 */
/* 局部组件只有在挂戟的区域使用例如: #app这个div中 */
Vue组件父传子
<div id="box">
<div>
父传子把arr传入给子组件 绑定自定义事件
<child1 :getarr='arr' @dell='dell'/>
</div>
</div>
<template id="child1">
<div>
/ 子组件接收父传过来值 遍历出来 / /del方法子改父/
<h1 v-for="(item,index) in getarr" :key="index" @click="del(index)">{{item.name}}</h1>
</div>
</template>
<script src="./vue.min.js"></script>
<script>
new Vue({
el:'#box',
data:{
arr:[{name:'zhangsan'},{name:'wangwu'},{name:'lisi'}]
},
methods:{
dell:function(i){
/实现点击arr的某一项删除掉/
this.arr.splice(i,1)
}
},
components:{
child1:{
template:'#child1',
/使用props来接收父传来的数据/
props:['getarr'],
methods: {
del(i){
/ 使用this.$emit发送自定义事件dell/
this.$emit('dell',i)
}
},
/*data采用函数的方式 会产生局部作用域 里面的数据是组件私有的
不会对全局造成影响怎么获取数据呢﹖采用return一个对象的方式*/
data:function(){
return {
a:'123'
}
},
}
}
})
</script>
/* 子改父的步骤 */
/* 1：使用Vue里面的$emit方法发送一个自定义事件dell */
/* 2：在组件上使用@dell="dell" 绑定自定义事件 触发父组件的dell方法
/* 3：在父组件中的dell方法内把父组件的msg的值给改了 */
this.$set
/*☆vue2的缺陷不可以给对象里面添加属性可以添加
但是页面不会渲染响应的结果 */
使用this.$set解决
/*this.$set(this.str,i,{name:this.str[i].name,flag:true}) */
/* $set的三个参数第一个参数是目标对象 this.list*/
/*产第二个参数是目标参数的索引 */
/*第三个参数是具体要修改的内容*/
