目录
实例: 通过使用事件来修改父组件中的值 点击子组件的按钮修改父组件的值
案例: 通过点子组件的按钮修改父组件中p标签的颜色 使用.sync修饰符操作
兄弟传值的方式 bus.js bus.$on bus.$emit
案例:兄弟组件 点击brotherFoot组件的按钮 传值给 brotherHead组件的p标签展示
父子组件传值方式:
利用事件来修改父组件的值
// 父组件板块
// v-on:add 是监听 add事件中的add方法 完整版
<子组件 v-on:add="add"></子组件>
// 简写版
<子组件 @add="add"></子组件>
data(){
return {
title: ''
}
}
methods: {
add(val){
this.title = val
}
}
-------------------------------------------------------------------------------------------
// 子组件板块
this.$emit('add','hello')
实例: 通过使用事件来修改父组件中的值 点击子组件的按钮修改父组件的值
* 父组件 parent.vue
<template>
<div>
<h2>我是父组件</h2>
<p>需要修改的值:{{ title }}</p>
<son @alterTitleName="alterTitle"></son>
</div>
</template>
<script>
export default {
name: 'ParentSonParent',
components: {
son: () => import('@/components/son.vue')
},
data() {
return {
title: '你好'
};
},
mounted() {
},
methods: {
alterTitle(val) {
this.title = val
}
},
};
</script>
<style lang="less" scoped>
</style>
* 子组件 son.vue
<template>
<div>
<h3>我是子组件{{ title }}</h3>
<button @click="alertTitleSon">点击我修改父组件的文本</button>
</div>
</template>
<script>
export default {
name: 'ParentSonSon',
data() {
return {
title: 'hello'
};
},
mounted() {
},
methods: {
alertTitleSon() {
this.$emit('alterTitleName',this.title)
}
},
};
</script>
<style lang="scss" scoped>
</style>
父组件传值的方式:
// 完整体
<子组件 v-bind:title='doc.title'></子组件>
// 简写
<子组件 :title='doc.title'></子组件>
子组件 props 接收父组件的传的prop 值
// 三种props接收值的方式
// 第一种
props: ['title']
// 第二种
props: {
title: String
}
// 第三种
props: {
title: {
type: Number,
default: 100
}
}
// 第三种参照这个,如果看不懂就看vue官方文档
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].includes(value)
}
}
}
$emit('父组件定义的事件名', 子组件传的值) 提供的是一个回调函数
子组件修改父组件的值:.sync修饰符
解析.sync修饰符的语法糖原理
<子组件 v-bind:title="doc.title" v-on:update:title="doc.title = $event"></子组件>
// 先向子组件传了一个doc.title变量的值,定义的属性名是title
// 然后设置监听事件,监听update事件,更新title(也就是doc.title)的属性值 然后用回调函数的方式修改这个值
// 回调函数: 传回来的值val val => doc.title = val
// 原本的样子 v-on:update:title="val => doc.title = val"
<子组件
v-bind:title="doc.title"
v-on:update:title="val => doc.title = val"
></子组件>
// 父组件 html代码 完整版
// 这里的v-bind:title是指父组件向子组件传的值名为 title doc.title是父组件data中的变量
// v-on:update:title 是指把父组件data中的变量传递给子组件 加上监听update事件,更新title的属性值
// doc.title是父组件data中的变量 $event接收子组件传的值并赋值给父组件的doc.title变量
<子组件 v-bind:title="doc.title" v-on:update:title="doc.title = $event"></子组件>
// 简写版本
<子组件 v-bind:title.sync="doc.title"></子组件>
// 子组件中修改 父组件的变量 doc.title
// 子组件把变量newTitle赋值给doc.title以此来改变父组件中的doc.title的值
this.$emit('update:title', newTitle)
// 用这种方式是怕拿错值,所以先做属性验证
props: {
title: String
}
案例: 通过点子组件的按钮修改父组件中p标签的颜色 使用.sync修饰符操作
* 父组件 parent.vue
<template>
<div>
我是父组件
<son :activeColor.sync="backgroundRed"></son>
<p :style="backgroundRed">123</p>
</div>
</template>
<script>
export default {
name: 'ParentSonParent',
components: {
son: () => import('@/components/son.vue')
},
data() {
return {
backgroundRed: 'background-color: red'
};
},
mounted() {
},
methods: {
},
};
</script>
<style lang="less" scoped>
</style>
* 子组件 son.vue
<template>
<div>
<h3>我是子组件</h3>
<button @click="activeShow">点我改颜色</button>
</div>
</template>
<script>
export default {
name: 'ParentSonSon',
props:{
activeColor: String
},
data() {
return {
};
},
mounted() {
},
methods: {
activeShow(){
this.$emit('update:activeColor','background-color: yellow')
}
},
};
</script>
<style lang="less" scoped>
</style>
兄弟传值的方式 bus.js bus.$on bus.$emit
第一步:先创建一个公共仓库 bus.js
先创建一个文件夹 common文件夹 再创建一个bus.js
bus.js 中的代码
import Vue from 'vue'
export default new Vue
第二步:兄弟组件(大哥-接收方) 定义个事件 bus.$on('事件名',() => {})
第三步:兄弟组件(小弟-传递方)使用定义的事件传值 bus.$emit('事件名', 需要传的参数)
案例:兄弟组件 点击brotherFoot组件的按钮 传值给 brotherHead组件的p标签展示
* 兄弟组件 brotherHead组件 定义个事件 bus.$on('事件名',() => {})
// 兄弟组件 brotherHead组件
<template>
<div>
<h3>我是兄弟组件 brotherHead</h3>
<p>我是head的信息区域:{{ msg }}</p>
</div>
</template>
<script>
import bus from '@/common/bus'
export default {
name: 'ParentSonBrotherHead',
data() {
return {
msg : '你好'
};
},
mounted() {
bus.$on('alterMsg',res => {
this.msg = res
})
},
methods: {
},
};
</script>
<style lang="less" scoped>
</style>
* 兄弟组件 brotherFoot组件 使用定义的事件传值 bus.$emit('事件名', 需要传的参数)
// 兄弟组件 brotherFoot组件
<template>
<div>
<h3>我是兄弟组件 brotherFoot</h3>
<button @click="alterMsg">点击我,能改变brotherHead的信息</button>
</div>
</template>
<script>
import bus from '@/common/bus'
export default {
name: 'ParentSonBrotherFoot',
data() {
return {
};
},
mounted() {
},
methods: {
alterMsg(){
bus.$emit('alterMsg', '大哥你好')
}
},
};
</script>
<style lang="less" scoped>
</style>
* 父组件 parent.vue
// 父组件代码块
<template>
<div>
<h2>我是父组件</h2>
<hr>
<p>这是兄弟传值区域</p>
<brother-head></brother-head>
<brother-foot></brother-foot>
</div>
</template>
<script>
export default {
name: 'ParentSonParent',
components: {
brotherHead: () => import('@/components/brotherHead.vue'),
brotherFoot: () => import('@/components/brotherFoot.vue')
},
data() {
return {
};
},
mounted() {
},
methods: {
},
};
</script>
<style lang="less" scoped>
</style>
注意: 有时候vscode里面报错千万别暴躁,别怀疑自己,如果从头到尾检查一个遍也没发现出错的地方,那就把之前写的删了重新写一下, 相信我立马就不报错了,反正我称这种现象为玄学,我也不知道它是出了个啥毛病。(这种是最不耗时间的解决报错的方式)