组件通信
每个组件的变量和值都是独立的
父：使用其他组件的vue文件(App.vue)
子：被引入的组件（MyPannel.vue）
从外面给组件内传值，学会语法，练习，项目看使用场景
父向子
- 创建组件componets/MyProduct.vue
- 组件内在props定义变量，用于接收外部传入的值
- App.vue中引入注册组件，使用时，传入具体数据给组件显示
口诀：
1：子组件--props--变量(准备接收)
2：父组件--自定义属性-传值进去
父组件App.vue
<template>
<div>
<!--
每次组件显示不同的数据信息
2-自定义属性:给子组件传值
口诀：
1：子组件--props--变量(准备接收)
2：父组件--自定义属性-传值进去
-->
<my-product title="超好吃的口水鸡" price="199"></my-product>
<my-product title="超级难吃的浏览" price="299"></my-product>
<my-product :title="tit" :price="p"></my-product>
</div>
</template>
<script>
import MyProduct from './components/MyProduct.vue'
export default {
data() {
return {
tit: '超级大的西瓜',
p: 50,
}
},
components: {
// MyProduct: MyProduct,
MyProduct,
},
}
</script>
子组件 MyProduct.vue
<template>
<div class="list">
<h3>标题:{{ title }}</h3>
<p>价格:{{ price }}</p>
<p>开业大酬宾，全场8折</p>
</div>
</template>
<script>
export default {
// 1-组件内props定义变量 用来接收外部传入的值
props: ['title', 'price'],
}
</script>
<style scoped>
.list {
width: 300px;
height: 140px;
border: 1px solid;
border-radius: 10px;
}
</style>
总结： 组件封装复用的标签和样式，具体的数据靠外面传入
父传子--配合循环
把数据循环分别传入给组件内显示
<template>
<div>
<!--
每次组件显示不同的数据信息
2-自定义属性:给子组件传值
口诀：
1：子组件--props--变量(准备接收)
2：父组件--自定义属性-传值进去
-->
<my-product
v-for="item in arr"
:key="item.id"
:title="item.tit"
:price="item.price"
></my-product>
</div>
</template>
<script>
import MyProduct from './components/MyProduct.vue'
export default {
data() {
return {
arr: [
{
id: 1,
tit: '超好吃的口水鸡',
price: 199,
},
{
id: 2,
tit: '超好吃的老鸭',
price: 49,
},
{
id: 3,
tit: '超级无敌的冰激凌',
price: 1999,
},
],
}
},
components: {
// MyProduct: MyProduct,
MyProduct,
},
}
</script>
单向数据流
在vue中需要遵循单向数据流原则
1：父组件的数据发生了改变，子组件会自动跟着变
2：子组件不能直接修改父组件传递过来的props，props是只读的
父组件传给子组件是一个对象，子组件修改对象的属性， 是不会报错的，对象是引用类型，互相更新
总结:props的值不能重新赋值，对象引用关系属性值改变，互相影响
子传父
从子组件把值传出来给外面使用
语法：
- 父 ： @自定义事件名=“父methods函数”
- 子 ： this.$emit('自定义事件名',传值)---执行父methods里函数
父组件
<template>
<div>
<!--
11-父组件：
@自定义事件名="父methods函数"
-->
<my-product @priceevent="priceFn" :title="tit" :price="price"></my-product>
</div>
</template>
<script>
import MyProduct from './components/MyProduct.vue'
export default {
data() {
return {
tit: '超级好吃的口水鸡',
price: 199,
}
},
methods: {
priceFn(val) {
// val就是从子组件传递过来的值
console.log(val)
this.price = val
},
},
components: {
// MyProduct: MyProduct,
MyProduct,
},
}
</script>
子组件
<template>
<div class="list">
<h3>标题:{{ title }}</h3>
<p>价格:{{ price }}</p>
<p>开业大酬宾，全场8折</p>
<button @click="changPrice">更改</button>
</div>
</template>
<script>
export default {
// 1-组件内props定义变量 用来接收外部传入的值
props: ['title', 'price'],
methods: {
changPrice() {
// 从子组件中把值传递出去
// this.$emit触发自定义事件
// this.$emit('自定义事件名',传递参数)
this.$emit('priceevent', 599)
},
},
}
</script>
