Vue2.X 父子组件通信兄弟传值

最新推荐文章于 2024-04-24 20:12:37 发布

菜鸟-忆楦（没进阶前不改）

最新推荐文章于 2024-04-24 20:12:37 发布

阅读量606

点赞数

分类专栏： Vue基础语法文章标签：前端 vue.js

本文链接：https://blog.csdn.net/sinat_55275851/article/details/127062530

版权

Vue基础语法专栏收录该内容

1 篇文章 0 订阅

订阅专栏

父子组件传值方式：

利用事件来修改父组件的值

实例：通过使用事件来修改父组件中的值点击子组件的按钮修改父组件的值

父组件传值的方式：

子组件 props 接收父组件的传的prop 值

子组件修改父组件的值：.sync修饰符

案例：通过点子组件的按钮修改父组件中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里面报错千万别暴躁，别怀疑自己，如果从头到尾检查一个遍也没发现出错的地方，那就把之前写的删了重新写一下，相信我立马就不报错了，反正我称这种现象为玄学，我也不知道它是出了个啥毛病。(这种是最不耗时间的解决报错的方式)