前言

Vue是数据驱动视图更新的框架, 平时写业务时,都会把页面不同模块拆分成一个一个vue组件, 所以对于vue来说组件间的数据通信非常重要

提示：以下是本篇文章正文内容，下面案例可供参考

一、props是什么？

props是Vue实例上的一个属性,用于组件的传值
作用:为了接收外面传过来的数据，与data、methods等是一个级别的配置项。
props在子属性和父属性之间形成一个单向向下的绑定(单向数据流)
当父属性更新时，它会向下流向子属性，但不会反过来。这可以防止子组件意外改变父组件的状态

使用规则

<script>
export default {//使用方式一props:["count"],//使用方式二props:{count:{//type:类型规定type:Number,//default:默认值default:0,//require:是否是必传require:true,}},
}
</script>

二、父传子 props

实现步骤

父传子通过 props实现
父组件通过自定义变量传入子组件
子组件利用props接收父组件值
接收props不能修改,但是可以在组件中直接使用
如果想要修改props,先把props赋值给其他变量,在进行修改

代码实现

//父组件
<template><div style="outline:1px solid red"><h1>我是父组件</h1><button @click="count+=1">要传递的值{{count}}</button>//第三步通过v-bind动态传入子组件<Child :count="count"></Child></div>
</template><script>
//第一步导入组件
import Child from "../child/index.vue"
export default {
//第二步组件注册components:{Child,},data () {return {count: 1}}
}

//子组件
<template><div style="outline:1px solid green"><h1>我是子组件</h1>// 第二步在页面中使用<div>接收父组件传值:{{count}}</div></div>
</template><script>
export default {//第一步利用 props 接收//可以直接在页面中使用,但不可修改;修改需要先将 props 中的数据赋值给 data 中的变量// props:["count"],props:{count:{type:Number,default:0,require:true,}},
}

效果展示

二.子传父 $emit

实现步骤

子传父通过 $emit 实现
在子组件中通过 $emit 方法传值给父组件
在父页面中的子组件标签中自定义事件接收

代码实现

//子组件
<template><div style="outline:1px solid green"><h1>我是子组件</h1><button @click="give">传递给父组件</button></div>
</template><script>
export default {methods:{give(){//第一步调用 $emit 传递参数//emit 中第一个参数是在父页面中接收的 事件名称//emit 中第二个尝试是要传递的数据this.$emit("child",`我是子组件值+ ${new Date().getTime()}`)}}
}

// 父组件
<template><div style="outline:1px solid red"><h1>我是父组件</h1><div>我是接收子组件的值:{{this.childValue}}</div>// 第一步在子组件中自定义事件接收 emit 传递的事件<Child :count="count" @child="accept"></Child></div>
</template><script>
import Child from "../child/index.vue"
export default {components:{Child,},data () {return {childValue:"",}},methods:{// 第二步在事件接收使用 子组件的传值accept(obj){this.childValue = obj}}
}

效果展示

三.兄弟传值 EventBus

实现步骤

兄弟之间传值通过 EventBus实现
在components文件中新建一个 js 文件,页面中导入Vue实例,然后导出一个new Vue()
在需要兄弟之间传值的组件中导入这个文件
传值时通过导入的文件调用$emit 实现($emit("事件名称",需要传递的值))
接收时通过导入的文件调用$on通过回调函数实现

代码实现

// component 文件夹中新建 eventBus.js 文件,用来实现兄弟组件通信
import Vue from "vue";export default new Vue()

// 组件 A
<template><div style="width: 100%; height: 100px; outline: 1px solid red"><button @click="send">A组件给B组件传值</button></div>
</template><script>
import bus from "../eventBus";
export default {methods: {send() {bus.$emit("share", `我是A组件+ ${new Date().getTime()}`);},},
};
</script><style lang="less" scoped>
</style>

// 组件 B
<template><div style="width:100%;height:100px;outline:1px solid green">接收A组件的值{{this.accept}}</div>
</template><script>
import bus from "../eventBus"export default {data(){return{accept:''}},mounted(){bus.$on("share",val=>{this.accept = val})}}
</script>

效果展示

总结

父传值子通过props实现
子传父通过emit自定义事件实现
兄弟传值通过 eventBus实现

目前暂时总结三种常用的组件传值方法

Vue组件传值(props属性,父到子,子到父,兄弟传值)相关推荐

【视频】vue组件之props属性
P9vue组件之props属性 https://www.bilibili.com/video/av91679349?p=9
vue 组件，props 属性，Vue 生命周期
本文涉及3个内容: 1.vue 组件: 目录结构: 源码分析如下: <div id="container"><h3>爱吃什么水果? app 实例</ ...
组件间数据交互——父组件向子组件传值（ props属性值类型）子组件向父组件传值-携带参数 || 非父子组件间传值
父组件向子组件传值 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
组件间数据交互||父组件向子组件传值-基本使用|| 父组件向子组件传值-props属性名规则
组件间数据交互父组件向子组件传值 1. 组件内部通过props接收传递过来的值 2. 父组件通过属性将值传递给子组件父组件向子组件传值-基本使用 <!DOCTYPE html> < ...
React创建组件的方法，组件的props属性、state属性的用法和特点，父子组件传值，兄弟组件传值
创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件定义一个组件最简单的方式是使用JavaS ...
Vue组件选项props
前面的话组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props ...
vue2知识点：组件的props属性、非props属性、props属性校验
文章目录 3.10props属性举例:父组件给子组件传递属性msg和greetText,子组件用属性a和b接收,并打印输出 3.11props校验举例 3.12非props属性举例:定义子组件设 ...
vue中组件的props属性（详）
今天这篇文章,让你彻底学会props属性-- props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data.el.ref是一个级别的配置项. 问题一:那props具体是怎么使用呢?原 ...
Vue中的 props 属性
1.什么是 props props 用于组件的传值,他的工作就是为了接受外面传过来的数据,是一个配置项,与data.el.ref 是一个级别的. 2.props 的使用 --1 先准备子组件 Tex ...

Vue组件传值(props属性,父到子,子到父,兄弟传值)

文章目录

前言

一、props是什么？

使用规则

二、父传子 props

实现步骤

代码实现

效果展示

二.子传父 $emit

实现步骤

代码实现

效果展示

三.兄弟传值 EventBus

实现步骤

代码实现

效果展示

总结

Vue组件传值(props属性,父到子,子到父,兄弟传值)相关推荐

最新文章

热门文章