vue子组件传递值给父组件(vue中父级页面给子组件如何传值)

结合上篇文章,自定义子组件的使用,来实现一个父传子的功能,功能很简单,点击父级页面按钮,将值传递给子组件中,今天小编就来聊一聊关于vue子组件传递值给父组件?接下来我们就一起去研究一下吧!

vue子组件传递值给父组件(vue中父级页面给子组件如何传值)

vue子组件传递值给父组件

结合上篇文章,自定义子组件的使用,来实现一个父传子的功能,功能很简单,点击父级页面按钮,将值传递给子组件中。

首先,我们在父级页面中,定义一个按钮标签(当然,父传子可以不需要设置点击事件,也可传值,在这里只是为了更加清晰演示)

Markup

<button @click="keyBtn()">按钮</button>

在JS中,我们给data中定义一个keys为传的参数,在点击事件 keyBtn()中,给keys赋值

JavaScript

export default { name: 'app', data () { return { keys: '默认值' } }, components:{ childer: childer }, methods: { keyBtn(){ this.keys = '我是父级给子级传的内容' } } }

接着在父级的子组件标签上写上如下,KeyChilder自行命名

Markup

<childer :KeyChilder='keys'></childer>

【PS】如果父组件未点击,那么默认的keys的值为“默认值”。

最后,我们在子组件中使用props进行接收,例如

JavaScript

export default { name: 'childer', data () { return { } }, props:["KeyChilder"] }

KeyChilder即为我们接收的值,随便写个标签显示到页面中即可

Markup

<p>{{KeyChilder}}</p>

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页