组件开发
什么是组件开发
- 一个页面(.vue)可能有一个或多个组件(.vue)组成完整的页面功能
为什么要组件开发
- 复用,方便维护
步骤:
- 定义组件
创建两个或多个.vue文件
- 注册组件
import Main from './Main.vue'
export default {
components: {
Main
}}
- 使用组件
<Main/>
使用scoped设置私有样式
问题:默认组件style定义的是全局样式==>存在覆盖情况
原理:添加了scoped属性,样式会随机生成一个data-v开头的自定义属性
总结:style加上scoped,组件内样式只在当前组件生效,相反,样式是全局的
使用deep 深度作用选择器
作用:当组件都设置了scoped属性,设置deep可以在父组件中控制子组件样式
场景:父组件中控制子组件样式==>需要添加/deep/
注意:默认子组件的根元素,会带上父组件的data-v-hash属性,所以可以直接控制
组件通讯-父传子
- 定义:如果一个组件A在组件B中被导入使用，称组件B是父组件，组件A是子组件
- 流程:父组件==>props==>子组件 流程图:
父组件
<template>
<div>
<h1>父组件</h1>
<!-- 1. 父传。自定义属性 -->
<MyCom :abc="userName" :list="hobby"/>
</div>
</template>
<script>
// 导入->注册->使用
import MyCom from './MyCom.vue'
export default {
data(){
return {
userName: 'xxx',
hobby: ['xxx','xxx']
}
},
components: { MyCom }
}
</script>
子组件
<template>
<div>
<h2>子组件</h2>
<!-- 使用 -->
{{abc}}
<p>
{{list[0]}}
</p>
</div>
</template>
<script>
export default {
// 2.子接
props: ['abc', 'list'],
methods: {
fn(){
console.log(this, this.abc)
}
}
}
</script>
子传父
- 父组件中：< 子组件 @自定义事件名1="父methods函数1" @自定义事件名2="父methods函数2" />
- 子: this.$emit("自定义事件名1", 传值1) ---> 执行父methods里函数代码 流程图:
父组件
<template>
<div style="border:1px solid #ccc; margin:5px;padding:5px">
<h1>32-子传父</h1>
<!-- 1. 添加事件监听 -->
<!-- 当子组件发生了abc事件要执行fn函数 -->
<MyCom @abc="fn"/>
</div>
</template>
<script>
// 导入
import MyCom from './MyCom.vue'
export default {
components: { MyCom },
methods: {
fn(obj){
console.log('fn-子组件发生了abc事件',obj)
}
}
}
</script>
子组件
<template>
<div style="border:1px solid #ccc; margin:5px;padding:5px">
<h2>子组件</h2>
<button @click="fn">触发abc事件</button>
</div>
</template>
<script>
export default {
methods: {
fn(){
console.log('子组件click')
// 2. 触发abc事件
this.$emit('abc',{name:'小花'})
}
}
}
</script>
vue单项数据流
不要修改props里面的数据
props的值不能重新赋值,但是引用类型可以子改父
单项数据流原则
- 在父传子的前提下,父组件的数据发生会通知子组件自动更新
- 子组件内部,不能直接修改父组件传递的props
当父组件传递的是一个对象,子组件修改对象属性,是不会报错的,对象是引用类型,不能修改地址
template标签中的数据来源
datacomputerdprops
