专注前端行业精选
vue中父级页面给子组件如何传值,VUE父传子
作者:鹏仔先生日期:2020-08-04浏览:1795分类:JavaScript
结合上篇文章,自定义子组件的使用,来实现一个父传子的功能,功能很简单,点击父级页面按钮,将值传递给子组件中。
首先,我们在父级页面中,定义一个按钮标签(当然,父传子可以不需要设置点击事件,也可传值,在这里只是为了更加清晰演示)
<button @click="keyBtn()">按钮</button>
在JS中,我们给data中定义一个keys为传的参数,在点击事件 keyBtn()中,给keys赋值
export default { name: 'app', data () { return { keys: '默认值' } }, components:{ childer: childer }, methods: { keyBtn(){ this.keys = '我是父级给子级传的内容' } } }
接着在父级的子组件标签上写上如下,KeyChilder自行命名
<childer :KeyChilder='keys'></childer>
【PS】如果父组件未点击,那么默认的keys的值为“默认值”。
最后,我们在子组件中使用props进行接收,例如
export default { name: 'childer', data () { return { } }, props:["KeyChilder"] }
KeyChilder即为我们接收的值,随便写个标签显示到页面中即可
<p>{{KeyChilder}}</p>
手机扫码访问
猜你还喜欢
- 03-05 js将数字金额用符号间隔 vue中使用逗号间隔数字金额
- 02-25 JS判断某个时间戳是否为当天时间
- 02-19 网页禁止返回 H5禁止物理返回 vue禁止返回
- 02-07 vue使用viewerjs实现图片点击放大
- 02-05 vue实现点击刷新页面 H5实现刷新页面
- 02-04 H5移动端项目实现手写签名功能 vue实现手写签名
- 02-04 vue移动端使用Vconsole Vconsole使用
- 02-04 vue中如何点击返回上一页,vue判断没有上页返回首页
- 01-13 苹果手机new Date()时候的坑 ios new Date时为NAN
- 12-31 base64转file文件格式 vue中将base64转file文件格式
- 12-31 原生js将数字金额转汉字金额 vue中数字金额转汉字金额
- 12-18 elementui日期选择器设置开始时间不能大于结束时间
暂无评论,来添加一个吧。