如何在Vue的父子组件之间传递数据和调用方法 - CSDN文库

161 浏览量更新于2023-05-04 收藏 44KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

如何在如何在Vue的父子组件之间传递数据和调用方法的父子组件之间传递数据和调用方法

一、传递数据一、传递数据

有时在子组件中需要用到父组件的数据

然鹅在默认情况下子组件中是无法访问到父组件中的data数据和methods中的方法的

父组件可在在引用的时候通过属性绑定属性绑定(v-bind)的方式将将需要传递给子组件的数据传递给子组件

然后在子组件中通过props属性进行定义即可

var vm=new Vue({

el:'#app',

data:{

mymsg:"123"

},

methods:{},

components:{

childcom:{

template:"

{{parentmsg}}

",

// 组件中的所有props中的数据都是通过父组件传递给子组件的

// 将父组件传递过来的parentmsg属性在props数组中进行定义如此才可使用该数据

props:["parentmsg"] }

}

});

在子组件标签上用v-bind进行绑定：

其中子组件中的data和props的区别是：

1、data中的数据是子组件自身的数据子组件自身的数据和父组件无关

而props里的数据是通过父组件传递给子组件通过父组件传递给子组件的

2、data里的数据是可读可写可读可写的

而props里的数据都是只读只读的无法重新赋值

二、调用方法二、调用方法

在子组件中调用父组件里面的方法

不仅能调用方法调用方法还可通过调用方法的方式进行传值传值将值作为方法的参数进行传递

这个传递的值包括对象类型

父组件可在在引用的时候通过事件绑定事件绑定(v-on)的方式将将需要传递给子组件的方法传递给子组件

以下为一个子组件调用父组件的方法传递给父组件对象类型的数据的案例：

首先首先在在Vue实例里定义一个要传递的方法和组件名：实例里定义一个要传递的方法和组件名：

var vm=new Vue({

el:'#app',

data:{

fathermsg:null

},

methods:{

// 将传入的子组件的数据给自己

getData(data)

{

this.fathermsg=data

}

},

// 定义子组件

components:{

mycomponent

}

});

然后然后定义一个子组件模板对象：定义一个子组件模板对象：

// 定义字面量类型的组件模板对象

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38743737

粉丝: 376
资源: 2万+

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈