1.Vue组件是什么
- 组件是可复用的 Vue 实例, 封装标签, 样式和JS代码
- 组件化 ：封装的思想，把页面上
可重用的部分封装为组件，从而方便项目的 开发 和 维护 - 一个页面， 可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的 结构 样式 和 行为(html, css和js)
2.全局注册
就是把组件注册在main.js文件里面,只要引入这个js文件就可以使用这个注册的全局组件
2.1-创建组件
就是一个单独的.vue文件就是一个组件
<template>
<div>
<p>全局注册组件</p>
</div>
</template>
<script>
export default {
};
</script>
2.2-引入组件
在main.js文件里面引入这个组件
// import 组件对象 from 'vue文件路径'
import Hello from './components/Hello'
2.3-注册组件
在main.js文件里面注册这个组件
// Vue.component('组件名', 组件对象)
Vue.component('Hello', Hello)
2.4-使用组件
在App.vue使用这个组件
<template>
<div>
<Hello></Hello>
</div>
</template>
<script>
export default {
};
</script>
3.局部注册
3.1-创建组件
<template>
<div>
<p>局部注册组件</p>
</div>
</template>
<script>
export default {
};
</script>
3.2-注册组件
在App.vue文件里面引入这个组件
// import 组件对象 from 'vue文件路径'
import Hello from './components/Hello'
3.3-注册组件
在App.vue文件里面注册这个组件
export default {
components: {
// "组件名": 组件对象
Hello : Hello
}
}
3.4-使用组件
在App.vue文件里面使用这个组件
<template>
<div>
<Hello></Hello>
</div>
</template>
<script>
export default {
components: {
// "组件名": 组件对象
// Hello : Hello
// 可以使用解构
Hello
}
}
</script>
组件使用总结:
- (创建)封装html+css+vue到独立的.vue文件中
- (引入注册)组件文件 => 得到组件配置对象
- (使用)当前页面当做标签使用
4.组件-scoped属性
App代码:
<div>
<p>App的样式</p>
<son></son>
</div>
</template>
<script>
import Son from './components/Son'
export default {
components:{
Son
}
};
</script>
<style lang="less" scoped>
</style>
组件代码:
<div>
<p>组件的样式</p>
</div>
</template>
<script>
export default {
};
</script>
<style lang="less" scoped>
p{
background-color: pink;
}
</style>
如果不给组件样式添加scoped属性,组件的样式就会影响App.vue的样式
在style上加入scoped属性, 就会在此组件的标签上加上一个随机生成的data-v开头的属性
而且必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到
5.组件通信-父向子-props
步骤:
- 创建组件components/MyProduct.vue - 复制下面标签
- 组件内在props定义变量, 用于接收外部传入的值
- App.vue中引入注册组件, 使用时, 传入具体数据给组件显示 App.vue代码:
<template>
<div>
<myproduct :title="title" :age=18 :city="city"></myproduct>
</div>
</template>
<script>
import MyProduct from './components/Hello.vue'
import Myproduct from './components/Myproduct.vue';
export default {
data() {
return {
title:'万叶',
city:'稻妻'
};
},
components:{
MyProduct,
Myproduct
},
mounted() {
},
methods: {
},
};
</script>
<style lang="scss" scoped>
</style>
组件代码:
<template>
<div class="my-product">
<h3>名字: {{ title }}</h3>
<p>年龄: {{ age }}岁</p>
<p>{{ city }}</p>
</div>
</template>
<script>
export default {
props: ['title', 'age', 'city']
}
</script>
<style>
.my-product {
width: 400px;
padding: 20px;
border: 2px solid #000;
border-radius: 5px;
margin: 10px;
}
</style>
注意: 通过属性绑定传递的数据可以是Vue的变量,但是要在属性前面加上:才能使用Vue的变量
6.组件通信_单向数据流
在vue中需要遵循单向数据流原则
- 父组件的数据发生了改变，子组件会自动跟着变
- 子组件不能直接修改父组件传递过来的props props是只读的
==父组件传给子组件的是一个对象，子组件修改对象的属性，是不会报错的，对象是引用类型, 互相更新==
总结: props的值不能重新赋值, 对象引用关系属性值改变, 互相影响
7.组件通信-子向父
语法:
- 父: @自定义事件名="父methods函数"
- 子: this.$emit("自定义事件名", 传值) - 执行父methods里函数代码 夫代码:
<template>
<div>
<!-- 夫向子传递数据 属性绑定 -->
<myproduct v-for="(item,index) in list" :key="item.id"
:title="item.proname"
:proprice="item.proprice"
:info="item.info"
:index="index"
@setdel='del'
></myproduct>
</div>
</template>
<script>
import Myproduct from './components/Myproduct3.vue';
export default {
data() {
return {
list: [
{ id: 1, proname: "超级好吃的棒棒糖", proprice: 18.8, info: '开业大酬宾, 全场8折' },
{ id: 2, proname: "超级好吃的大鸡腿", proprice: 34.2, info: '好吃不腻, 快来买啊' },
{ id: 3, proname: "超级无敌的冰激凌", proprice: 14.2, info: '炎热的夏天, 来个冰激凌了' },
],
};
},
components:{
Myproduct
},
methods: {
del(sum,index){
this.list[index].proprice-=sum
console.log(1);
}
},
};
</script>
<style lang="less" scoped>
</style>
组件代码:
<template>
<div class="my-product">
<h3>标题: {{ title }}</h3>
<p>价格: {{ proprice }}元</p>
<p>{{ info }}</p>
<button @click="del(index)">砍价</button>
</div>
</template>
<script>
export default {
props: ['title', 'proprice', 'info','index'],
methods:{
del(){
// 夫组件,向子组件传递数据 是单向数据流 子组件不能直接修改 夫组件数据
// 通过父组件去修改 子向夫数据
this.$emit('setdel',3,this.index)
}
}
}
</script>
<style>
.my-product {
width: 400px;
padding: 20px;
border: 2px solid #000;
border-radius: 5px;
margin: 10px;
}
</style>
