组件
组件:可复用的 Vue 实例, 封装标签, 样式和JS代码
组件化 ：封装的思想，把页面上可重用的部分封装为 组件，从而方便项目的 开发 和 维护
全局注册
全局入口在main.js, 在new Vue之上注册
语法:
import Vue from 'vue'
import 组件对象 from 'vue文件路径'
Vue.component("组件名", 组件对象)
main.js文件中
//导入 vue
import Vue from "vue";
// 2.引入组件
import MyButton from "./components/MyButton.vue";
// 3.注册组件
Vue.component("MyButton", MyButton);
// 导入本地文件 App.vue
import App from "./App.vue";
// 开发提示:默认关闭
Vue.config.productionTip = false;
// 创建一个vue 实例
new Vue({
// 渲染App 文件(组件)
render: (h) => h(App),
// mount 挂载在#App中
}).$mount("#app");
//步骤:1.创建组件(vue文件) 2.引入组件 3.全局注册
全局注册组件名后, 就可以当做标签在任意Vue文件中template里用
<template>
<div>
<MyButton></MyButton>
<MyButton></MyButton>
</div>
</template>
局部注册
语法:
import 组件对象 from 'vue文件路径'
export default {
components: {
"组件名": 组件对象
}
}
任意vue文件中中引入, 注册, 使用
<template>
<div>
<!-- 3.使用组件 -->
<MyProduct></MyProduct>
<MyProduct></MyProduct>
</div>
</template>
<script>
// 1.创建组件
// 2.引入组件
import MyProduct from "./components/MyProduct.vue";
export default {
// 注册组件
components: {
// MyProduct: MyProduct,
MyProduct,
},
data() {
return {};
},
};
</script>
局部注册,只能在当前文件使用
组件使用总结:
1. (创建)封装html+css+vue到独立的.vue文件中
2. (引入注册)组件文件 => 得到组件配置对象
3. (使用)当前页面当做标签使用
vue组件-scoped作用
解决多个组件样式名相同, 冲突问题
# style标签中添加了scoped属性，使得样式只作用于当前组件的标签中。
<style scoped>
button {
background-color: green;
}
</style>
组件通讯
父传子
1.子组件中,props定义变量,准备接收,然后使用变量
2.父组件内,要展示封装好的子组件,引入组件,注册组件,使用组件,传值进去
父组件
<template>
<div>
<!-- 3.使用组件 -->
<MyProduct
title="手撕鸡"
:price="50"
info="打八八折"
@change="changFn"
></MyProduct>
<MyProduct title="手撕鸡" :price="price" info="打八八折"></MyProduct>
</div>
</template>
<script>
// 1.创建组件
// 2.引入组件
import MyProduct from "./components/MyProduct.vue";
export default {
// 注册组件
components: {
// 组件名:组件对象
// MyProduct: MyProduct,
MyProduct, //解构写法
},
data() {
return { price: 50 };
},
};
</script>
子组件
<template>
<div class="box">
<h3>标题:{{ title }}</h3>
<p>价格:{{ price.toFixed(2) }}元</p>
<p>开业大吉:{{ info }}</p>
<button @click="bb">点击</button>
</div>
</template>
<script>
// 接收组件
export default {
// vue规定props里的变量,本身是只读的
props: ["title", "price", "info"],
methods: {
bb() {
this.price--;
},
},
};
</script>
<style scoped>
.box {
padding: 50px;
border: 2px solid #000;
border-radius: 10px;
}
</style>
直接在子组件中修改父组件传递过来的数据,会报错
原因:
- 子组件修改, 不通知父级, 造成数据不一致性
- Vue规定props里的变量, 本身是只读的
- 重点：从父到子的数据流向,叫单向数据流
父组件的值没改
子组件的值改了
子传父
语法
父: @自定义事件名="父methods函数"
子: this.$emit("自定义事件名", 传值) - 执行父methods里函数代码
父组件
<template>
<div>
<!-- 关键步骤2：父组件通过属性传值 -->
<MyProduct
title="口水鸡"
:price="price"
info="开业大酬宾"
@change="fn"
></MyProduct>
</div>
</template>
<script>
/**
子传父关键步骤
1、子组件内，触发自定义事件，给值 this.$emit('自定义事件名', 值)
2、父组件内，绑定自定义事件，接值 @自定义事件='事件处理函数'
*/
import MyProduct from "./components/MyProduct.vue";
export default {
components: {
MyProduct,
},
data() {
return {
price: 50,
};
},
methods: {
fn(val) {
// console.log('🧑父组件收到孩子的呼叫', val)
this.price = Number((this.price - val).toFixed(2));
},
},
};
</script>
子组件
<template>
<div class="box">
<h3>标题：{{ title }}</h3>
<p>价格：{{ price.toFixed(2) }}元</p>
<p>活动信息：{{ info }}</p>
<p><button @click="btn">点击砍价</button></p>
</div>
</template>
<script>
/**
子传父关键步骤
1、子组件内，触发事件，给值 this.$emit('自定义事件名', 值)
2、父组件内，绑定事件，接值 @自定义事件='事件处理函数'
*/
export default {
// 接收变量
props: ["title", "price", "info"],
methods: {
btn() {
console.log("点击子组件的按钮");
// 子: this.$emit("自定义事件名", 传值)
this.$emit("change", 0.01);
},
},
};
</script>
<style scoped>
.box {
width: 300px;
padding: 20px;
border: 2px solid #000;
border-radius: 10px;
margin: 10px;
}
</style>
结合多个子组件
父组件
<template>
<div>
<!-- @change里面是通过一个函数去调用changeFn函数 -->
<MyProduct
v-for="item in list"
:key="item.id"
:title="item.proname"
:price="item.proprice"
:info="item.info"
@change="
(val) => {
changeFn(val, item)
}
"
/>
</div>
</template>
<script>
import MyProduct from './components/MyProduct.vue'
export default {
components: {
MyProduct,
},
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: '炎热的夏天, 来个冰激凌了',
},
],
}
},
methods: {
changeFn(val, item) {
// console.log('父组件接收', val,item)
item.proprice = Number((item.proprice - val).toFixed(2))
},
},
}
</script>
子组件
<template>
<div class="box">
<h3>标题：{{ title }}</h3>
<p>价格：{{ price.toFixed(2) }}元</p>
<p>活动信息：{{ info }}</p>
<p><button @click="btn">点击砍价</button></p>
</div>
</template>
<script>
/**
子传父关键步骤
1、子组件内，触发事件，给值 this.$emit('自定义事件名', 值)
2、父组件内，绑定事件，接值 @自定义事件='事件处理函数'
*/
export default {
// 接收变量
props: ["title", "price", "info"],
methods: {
btn() {
console.log("点击子组件的按钮");
// 子: this.$emit("自定义事件名", 传值)
this.$emit("change", 0.01);
},
},
};
</script>
<style scoped>
.box {
width: 300px;
padding: 20px;
border: 2px solid #000;
border-radius: 10px;
margin: 10px;
}
</style>
$event写法
<template>
<div>
<MyProduct
v-for="item in list"
:key="item.id"
:title="item.proname"
:price="item.proprice"
:info="item.info"
@change="changeFn($event, item)"
/>
</div>
</template>
<script>
import MyProduct from "./components/MyProduct.vue";
export default {
components: {
MyProduct,
},
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: "炎热的夏天, 来个冰激凌了",
},
],
};
},
methods: {
changeFn(val, item) {
// console.log('父组件接收', val,item)
item.proprice = Number((item.proprice - val).toFixed(2));
},
},
};
</script>
组件通信--EventBus
常用于跨组件通信时使用---相对来说很少用
语法:
- src/EventBus/index.js – 创建空白Vue对象并导出
- 在要传递值的组件(a.vue) eventBus.$emit('事件名', 值)
-
在要接收值的组件(b.vue) eventBus.$on('事件名', 函数体)
3.png
创建空白Vue对象
import Vue from 'vue'
// 创建了一个完全空白的 vue 对象
// 事件总线在 中大型项目 中几乎不用，因为维护起来谁与谁通讯这层关系并不明确
// 以后我们会用 VueX 状态管理库解决跨组件通讯的问题
export default new Vue()
传递值的组件
<template>
<div>
<h2>组件A</h2>
<button @click="btn">触发自定义事件</button>
</div>
</template>
<script>
import eventBus from '../eventBus/index'
export default {
methods: {
btn() {
eventBus.$emit('aaa', { msg: '有意思~', count: 1 })
},
},
}
</script>
接收值的组件
<template>
<div>
<h2>组件B</h2>
</div>
</template>
<script>
import eventBus from '../eventBus/index'
// console.log('EventBus', EventBus)
export default {
created() {
// 组件创建时绑定一个自定义事件
eventBus.$on('aaa', val => {
console.log('自定义事件被触发了', val)
})
},
}
</script>
