#博学谷IT学习技术支持#
目录
1. vue组件
1.0局部 - 注册使用
1.1vue组件-scoped作用
2. vue组件通信
2.0_vue组件通信_父向子-props
2.1_vue组件通信_父向子-配合循环
2.2_vue组件通信_子向父
2.3_vue组件通信-EventBus
1. vue组件
1.0局部 - 注册使用
组件使用总结:
(创建)封装html+css+vue到独立的.vue文件中
(引入注册)组件文件 => 得到组件配置对象
(使用)当前页面当做标签使用
1.1vue组件-scoped作用
2. vue组件通信
因为每个组件的变量和值都是独立的
组件通信先暂时关注父传子, 子传父
父: 使用其他组件的vue文件
子: 被引入的组件(嵌入)
例如: App.vue(父) MyProduct.vue(子)
2.0_vue组件通信_父向子-props
步骤:
创建组件components/MyProduct.vue - 复制下面标签
组件内在props定义变量, 用于接收外部传入的值
App.vue中引入注册组件, 使用时, 传入具体数据给组件显示
components/MyProduct.vue - 准备标签
2.1_vue组件通信_父向子-配合循环
单向数据流
在vue中需要遵循单向数据流原则
父组件的数据发生了改变，子组件会自动跟着变
子组件不能直接修改父组件传递过来的props props是只读的
==父组件传给子组件的是一个对象，子组件修改对象的属性，是不会报错的，对象是引用类型, 互相更新==
2.2_vue组件通信_子向父
<template>
<div>
<!-- 目标: 子传父 -->
<!-- 1. 父组件, @自定义事件名="父methods函数" -->
<MyProduct v-for="(obj, ind) in list" :key="obj.id"
:title="obj.proname"
:price="obj.proprice"
:intro="obj.info"
:index="ind"
@subprice="fn"
></MyProduct>
</div>
</template>
<script>
import MyProduct from './components/MyProduct_sub'
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: {
fn(inde, price){
// 逻辑代码
this.list[inde].proprice > 1 && (this.list[inde].proprice = (this.list[inde].proprice - price).toFixed(2))
}
}
};
</script>
<style>
</style>
2.3_vue组件通信-EventBus
