Vue中常用的组件传值方式

vue传值方式有：1、prop(父传子)；2、子组件通过$emit触发父组件的自定义事件（子传父）；
3.v-model（双向绑定） 4.refs 5.provide/inject 6.eventBus 7.vuex/pinia(状态管理工具)

下面介绍常用的几种：
父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据。子组件通过事件给父组件发送消息。

prop：（父传子）

父组件通过prpo向下传递
官方文档：链接

父组件

<template><div>父组件:<input type="text" v-model="par0"> <!-- 引入子组件 --><child :obj0="par0" :obj1="par1" :obj2="par2" :obj3="par3" :obj4="par4" ></child>  //child子组件通过 :par0="par1" 将值传过去</div>
</template>
<script>import child from './child'export default {components: {child},data () {return {par0: '',//通过 v-model双向绑定par1: ["123","456"],par2: true,par3: 123,par4: {显示: "否", 显示关闭按钮: "否"}}}}
</script>

子组件

<template><div>子组件:<span>{{obj0}}</span><!--显示父组件传来的值--><span>{{obj1}}</span><!--显示父组件传来的值--><span>{{obj2}}</span><!--显示父组件传来的值--><span>{{obj3}}</span><!--显示父组件传来的值--></div>
</template>
<script>export default {// 接受父组件的值props: {obj0: String,   //在这里对传过来的进行接收  可以设置类型obj1: Array,obj2: Boolean,obj3: Number,obj4: {type: Object,default: () => {//可设置默认值return { 显示: "是", 显示关闭按钮: "是" };}},}}
</script>

$emit：（子传父）

子组件通过事件给父组件发送消息。
官方文档：链接
父组件

//父组件
<template><div><i>父组件</i><!--引入子组件--><son @getChildValue="methods1($event)"></son>//自定义一个事件,子组件会触发这个事件  $event：表示接收到子组件传递的值</div>
</template><script>
import son from "./son.vue"; //导入父组件
export default {components: { son }, //注册组件name: "父组件",data() {return {};},methods: {methods1(item){alert(item.name);//得到子组件传的值}},
};
</script>

子组件

//子组件
<template><div> <button @click="transmit(par0)">点我</button></div>
</template><script>
export default {components: { },
data () {return {par0: {name:"张三",sex:"男"}}},name: '子组件',methods: {transmit(par0){this.$emit("getChildValue", par0)//通过emit来触发父组件中引入子组件定义的事件  第一个参数必须要写父组件中引入子组件定义的事件名，第二个参数是传递的值    也可以不穿第二个参数只触发事件}},
};
</script>

provide/inject：（父传子(祖父级)）

官方这样说：这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。大体意思是也就是说如果所有的组件都依赖一个组件时，可以在最外层的组件向所有依赖此组件的组件传递信息。

官方文档：链接

祖父级组件

//父组件
<template><div><i>父组件</i><!--引入子组件--><son ></son></div>
</template><script>
import son from "./son.vue"; //导入父组件
export default {components: { son }, //注册组件name: "父组件",data() {return {par1:"123"};},provide() {//父组件传递函数或参数   子组件通过inject接收   只要是此组件下的所有组件都可接收此函数或参数return {processingTextLength: this.methods1,text: this.par1};},methods: {methods1(par){alert(par);//处理}},
};
</script>

子组件

//子组件
<template><div> <button @click="processingTextLength(par0)">点我</button>//父组件传来的函数<button @click="transmit(text)">点我</button>//父组件传来的值</div>
</template><script>
export default {name: '子组件',
components: { },
data () {return {par0: "张三"}},
inject: ["processingTextLength","text"],//父组件传递的函数
methods: {transmit(par0){alert(par0);}},
};
</script>

Vue中常用的组件传值方式相关推荐

vue中的父子组件传值详解
父组件与子组件传值 //父组件通过标签上面定义传值 <template> //使用子组件,在里面传输数据<main :obj="data"></mai ...
vue中，兄弟组件之间传值
vue中,兄弟组件之间传值项目中,需要使用多个子组件,当需要传递值的时候,较为麻烦,怎样实现呢 1.一般可以使用子组件a传递给父组件,再由父组件传递给子组件b.但是一般较为麻烦, 2.使用bus作为 ...
【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于"父子组件通信"的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰 ...
vue 文件转换二进制_在vue中使用axios实现post方式获取二进制流下载文件(实例代码)...
需求点击导出下载表格对应的excel文件在 vue 项目中,使用的 axios ,后台 java 提供的 post 接口 api 实现第一步,在 axios 请求中加入参数,表示接收的数据为二进 ...
【Vue】学习笔记-组件传值的数据累加器
[Vue]学习笔记-组件传值的数据累加器前言父级组件购物车组件计数器组件常见错误总结前言组件传值的数据累加器可以分为三个部分 App.vue为父级组件 Carts.vue表示购物车 Co ...
Vue中常用的8种v指令
Vue中常用的8种v指令根据官网的介绍,指令是带有 v- 前缀的特殊属性.通过指令来操作DOM元素指令功能 v-text="变量/表达式" 文本的设置字符串变量+数字可以 ...
Vue中，一个组件调用其他组件的方法（非父子组件）
Vue中,一个组件调用其他组件的方法(非父子组件) 场景--B页面(组件)想调用 A页面(组件)中的方法:但是两个页面(组件)毫无关联(刷新 A的数据). 方式一:引用式 1.当前组件引入将要调用方法 ...
vue树形结构html,怎么在vue中利用递归组件实现一个树形控件
怎么在vue中利用递归组件实现一个树形控件发布时间:2021-06-11 17:26:48 来源:亿速云阅读:81 作者:Leah 本篇文章为大家展示了怎么在vue中利用递归组件实现一个树形控件, ...
vue验证整数_前端Vue中常用rules校验规则
前端Vue中常用rules校验规则 1.是否合法IP地址 export function validateIP(rule, value,callback) {if(value==''||value== ...
vue中写svg组件svg图片加载不出来
vue中写svg组件svg图片加载不出来结构首先要安装3个插件:svg-sprite-loader,svgo,svgo-loader npm install svg-sprite-loader - ...

Vue中常用的组件传值方式

prop：（父传子）

$emit：（子传父）

provide/inject：（父传子(祖父级)）

Vue中常用的组件传值方式相关推荐

最新文章

热门文章