父子组建传值_详解Vue之父子组件传值

父子组建传值_详解Vue之父子组件传值一、简要介绍父子组件之间的传值主要有三种:传递数值、传递方法、传递对象,主要是靠子组件的props属性来接收传值,下面分别介绍:(一)传递数值1.子组件:Header.vue{{msg}}exportdefault{data(){return{}},methods:{},//接收父类的传值props:[‘msg’]}可以看到,在子组件中的data对象里并没有msg属性,这里调…

大家好,又见面了,我是你们的朋友全栈君。

一、简要介绍

父子组件之间的传值主要有三种:传递数值、传递方法、传递对象,主要是靠子组件的 props 属性来接收传值,下面分别介绍:

(一)传递数值

1.子组件:Header.vue

{
{msg}}

export default {

data() {

return {

}

},

methods: {

},

// 接收父类的传值

props: [‘msg’]

}

可以看到,在子组件中的data对象里并没有 msg 属性,这里调用的是父类传递过来的 msg 属性,接收就是靠 props: [‘msg’]。

2.父组件Home.vue

// 1.引入子组件

import Head from ‘./Head.vue’;

export default {

data() {

return {

msg: ‘我是一个组件’

}

},

methods: {

},

components: {

“v-head”: Head

},

// 页面刷新时请求数据

mounted() {

}

}

传值的核心思想就是,在使用子组件的地方,加上要传递的值:

(二)传递方法

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

父组件

// 1.引入子组件

import Head from ‘./Head.vue’;

export default {

data() {

return {

msg: ‘我是一个组件’

}

},

methods: {

run() {

alert(this.msg);

}

},

components: {

“v-head”: Head

},

// 页面刷新时请求数据

mounted() {

}

}

子组件

接收父组件的方法

export default {

data() {

return {

}

},

methods: {

},

// 接收父类的传值

props: [‘run’]

}

(三)传递对象

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

父组件

// 1.引入子组件

import Head from ‘./Head.vue’;

export default {

data() {

return {

msg: ‘我是一个组件’

}

},

methods: {

run() {

alert(this.msg);

}

},

components: {

“v-head”: Head

},

// 页面刷新时请求数据

mounted() {

}

}

子组件

{
{msg}}

接收父组件的方法

export default {

data() {

return {

// 调用传过来的home组件的msg属性

msg: this.home.msg

}

},

methods: {

run() {

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

this.home.run();

}

},

// 接收父类的传值

props: [‘home’]

}

(四)传递数值类型校验

props: {

‘home’: Object

}

其他和上面类似!

以上所述是小编给大家介绍的Vue之父子组件传值详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/145397.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 移动端开发基础知识「建议收藏」

    移动端开发基础知识「建议收藏」移动web开发指的是:需要适配移动设备的网页开发移动web开发与pc端web开发没有本质的区别,使用的还是HTML/CSS/JavaScript的技术移动端与pc端web开发的区别:1、浏览器不同移动端的浏览器与pc端不同谷歌浏览器苹果浏览器、UC浏览器QQ浏览器百度手机浏览器360安全浏览器搜狗浏览器猎豹浏览器等国内的手机浏览器都是根据webkit内核修…

  • 手机页面的前端开发工具_手机web页面

    手机页面的前端开发工具_手机web页面1.元素使用rem单位(相对于html的font-size,单位px)2.元素使用em单位(相对于自身的font-size,单位px)媒体查询样式的条件可以使用and满足想要的范围注意:手

  • 定制office2007静默安装版

    定制office2007静默安装版现在开始打造你的office20071.    全自动安装:a)    在每个.ww里面有一个名为Config.XML的配置文件来实现的。专业增强版本位于光盘根目录下的ProPlus.ww目录下,企业版则位于Enterprise.WW目录下b)    用记事本打开目录下的Config.xml,我们只需要修改里面的相应行就可以实现免输序列号、自动输入用户名、单

  • 直接sql 添加字段赋值

    直接sql 添加字段赋值SELECTuf.fans_idasfansId,u.`nickname`asnickname,u.`head`ashead,uf.`create_time`ascreateTime,1astypeFROM`user_fans`ufLEFTJOIN`user`uONuf.fans_id=u.idWHEREuf.`u…

    2022年10月25日
  • 新浪实时股票数据接口1

    新浪实时股票数据接口1股票数据的获取目前有如下两种方法可以获取:1.http/javascript接口取数据2.web-service接口1.http/javascript接口取数据1.1Sina股票数据接口以大秦铁路(股票代码:601006)为例,如果要获取它的最新行情,只需访问新浪的股票数据接口:http://hq.sinajs.cn/list=sh601006这个url会返回一串…

  • python vimrc[通俗易懂]

    python vimrc[通俗易懂]全局:在/etc/vim/vimrc中添加 本地:~/.vimrcsetfileencodings=utf-8,gbksetambiwidth=double“支持中文setsmartindentsetsmarttabsetexpandtabsettabstop=4setsofttabstop=4setshiftwidth=

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号