vue组件
什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可。
组件化和模块化的不同:
● 模块化:是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一
● 组件化:是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用
注意:组件中的DOM结构,有且只能有唯一的根元素(Root Element)来进行包裹
为什么组件中的data属性必须定义为一个方法并返回一个对象
数据隔离
父子组件传参
//组件的引入
import headerView from "@/components/headerView.vue";
import swiperView from "@/components/swiperView.vue";
components:{
headerView,
swiperView
},
父传子
在父组件的子标签中自定义一个属性,在子组件中用props接收,设置默认值。
//父组件
data(){
return{
father1:123
}
},
<!-- 父传子-->
<!-- 1、在父组件子标签中自定义一个属性-->
<headerView :ftos="father1"></headerView>
//子组件
// 2、在子组件中 props属性中 拿到自定义的属性
props: {
ftos: [Number],
// 定义多种类型
// type: [String, Number],
// 默认值
type1: {
type: [String],
default: '9999'
}
// type: {
//type: [String, Number, Object],
//default: () => {
// return {
// name: '123'
//}
// }
// }
},
created() {
// 不能修改父组件传过来的数据
console.log(this.ftos)
console.log(this.type1)
}
子传父
在父组件的子标签中自定义一个事件,方法里面有一个参数用来接收子组件的传值,在子组件中this.$emit(‘自定义事件的名字’,传递的数据 )
//父组件
methods:{
// data 接收来自子组件的传值
toFa(data){
console.log(data)
}
}
<!-- 子传父-->
<swiperView @toFather="toFa"></swiperView>
//子组件
data(){
return{
msg:45
}
},
created() {
// 传递参数 第一个参数 自定义事件的名字 第二个参数 传递的数据
this.$emit('toFather',this.msg)
}