vue父组件和子组件传值,vue3.0父子组件传值

vue父组件和子组件传值,vue3.0父子组件传值,详解Vue之父子组件传值

本文主要介绍Vue父子组件的值传递,通过示例代码介绍的非常详细,对大家的学习或者工作有一定的参考价值。有需要的朋友下面和边肖一起学习。

一、简要介绍

在父组件和子组件之间有三种主要类型的传递值:传递值、传递方法和传递对象。传递的值主要由子组件的props属性接收,下面介绍:

(一)传递数值

1.子组件:Header.vue

模板

差异

!-数据对象中没有msg属性,但是这里调用了父类传递的msg属性-

h2{{msg}}/h2

/div

/模板

脚本

导出默认值{

data() {

返回{

}

},

方法:{

},

//接收父类传递的值

道具:[msg]

}

/脚本

正如您所看到的,在子组件的数据对象中没有msg属性。这里调用父类传递的msg属性,接收依赖于props: [msg]。

2.父组件Home.vue

模板

差异

!-2.使用子组件并将值传递给它们-

v字头:msg=msg/v字头

英国铁路公司

英国铁路公司

/div

/模板

脚本

//1.介绍子组件

从导入标题。/head . vue ;

导出默认值{

data() {

返回{

消息:“我是一个组件”

}

},

方法:{

},

组件:{

“v形头”:头部

},

//刷新页面时请求数据

已安装(){

}

}

/脚本

价值传递的核心思想是在使用子组件的地方加上要传递的价值:v-head :msg=msg/v-head。

(二)传递方法

传递方法的写法和传递数值一样,下面只写关键步骤:

父组件

模板

差异

!-2.使用子组件并将值传递给它们-

v字头:run=run/v字头

英国铁路公司

英国铁路公司

/div

/模板

脚本

//1.介绍子组件

从导入标题。/head . vue ;

导出默认值{

data() {

返回{

消息:“我是一个组件”

}

},

方法:{

run() {

alert(this . msg);

}

},

组件:{

“v形头”:头部

},

//刷新页面时请求数据

已安装(){

}

}

/脚本

子组件

模板

差异

Button @click=run 接收父组件/按钮的方法

/div

/模板

脚本

导出默认值{

data() {

返回{

}

},

方法:{

},

//接收父类传递的值

道具:[跑]

}

/脚本

(三)传递对象

传递对象的写法和传递数值一样,下面只写关键步骤:

父组件

模板

差异

!-2.使用子组件并将值传递给它们,其中这是主组件-

v字头:home=this/v字头

英国铁路公司

英国铁路公司

/div

/模板

脚本

//1.介绍子组件

从导入标题。/head . vue ;

导出默认值{

data() {

返回{

消息:“我是一个组件”

}

},

方法:{

run() {

alert(this . msg);

}

},

组件:{

“v形头”:头部

},

//刷新页面时请求数据

已安装(){

}

}

/脚本

子组件

模板

差异

!-数据对象中没有msg属性,但是这里调用了父类传递的msg属性-

h2{{msg}}/h2

英国铁路公司

英国铁路公司

Button @click=run 接收父组件/按钮的方法

/div

/模板

脚本

导出默认值{

data() {

返回{

//调用传递的home组件的msg属性

味精:this.home.msg

}

},

方法:{

run() {

//调用传递的home组件的run()方法

this . home . run();

}

},

//接收父类传递的值

道具:[home]

}

/脚本

(四)传递数值类型校验

道具:{

home :对象

}

其他和上面类似!

以上是边肖对Vue父子组件的详细讲解和集成。希望对你有帮助。如果您有任何问题,请给我留言,边肖将及时回复您。非常感谢您对我们网站的支持!

vue父组件和子组件传值,vue3.0父子组件传值