Vue.js 是什么
Vue.js (读音 /vju"color: #ff0000">1. 通过props :需要从子组件传参数到父组件时适用
// 父组件.vue
<template> <div> <ok-input :params='number' :callback='callbackNum'></ok-input> </div> </template> <script type="text/ecmascript-6"> import okInput from '../ok-input/okinput.vue'; export default { props: {}, data() { return { number: {}, callbackNum: function (x) { console.log(x); } }; }, methods: { }, components: { 'ok-input': okInput } }; </script>
// 子组件.vue
<template> <div> <input v-model='numVal' @change='handleFun'></input> </div> </template> <script type="text/ecmascript-6"> import {Input, Select, Option, Button} from 'element-ui'; import 'element-ui/lib/theme-default/index.css'; export default { props: { params: { type: Object, default: { type: '' } }, callback: {} }, data() { return { x: 'hah', numVal: '' }; }, methods: { handleFun(val) { this.callback(val); // 将参数传回父组件中的回调函数 } }, components: { 'el-input': Input, } }; </script>
2.通过$emit: 只需获得当前操作对象时适用
// 父组件.vue <template> <div> <ok-input :params='inputs' @change='handleAge'></ok-input> </div> </template> <script type="text/ecmascript-6"> import okInput from '../ok-input/okinput.vue'; export default { props: {}, data() { return { number: {} }; }, methods: { handleAge(evt) { console.log(evt.target.value); // 接收从子组件传过来的当前对象 } }, components: { 'ok-input': okInput } }; </script>
// 子组件.vue
<template> <div> <input v-model='numVal' @blur='handleChange'></input> </div> </template> <script type="text/ecmascript-6"> import {Input, Select, Option, Button} from 'element-ui'; import 'element-ui/lib/theme-default/index.css'; export default { props: { params: { type: Object, default: { type: '' } }, callback: {} }, data() { return { x: 'hah', numVal: '' }; }, methods: { handleChange(evt) { this.$emit('change', evt); // 将当前对象 evt 传递到父组件 }, }, components: { 'el-input': Input, } }; </script>
总结
以上所述是小编给大家介绍的Vue2.0父子组件传递函数的教程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com
暂无评论...
更新日志
2024年11月15日
2024年11月15日
- 黑鸭子2005-紫丁香[首版][WAV+CUE]
- 林忆莲《爱上一个不回家的人》XRCD版[低速原抓WAV+CUE][999M]
- 经典《历届奥斯卡金曲回顾》[正版原抓WAV+CUE] [1G]
- 群星《试音草原·女声篇》经典蒙古民歌[WAV+CUE][1G]
- 炉石传说月末上分卡组推荐 国服月末最快上分卡组推荐
- 炉石传说月底最强卡组有哪些 2024国服月底最强卡组推荐
- 炉石传说月初最强卡组有哪些 2024月初最强上分卡组推荐
- 狼人杀亮相原生鸿蒙之夜 假面科技强势登陆华为生态
- 12小时光线挑战!AI画质专家才是大平层首选
- 2024游戏IP报告:1~9月规模1960亿 68%用户愿为之付费
- 群星.2024-今夜一起为爱鼓掌电视剧原声带【相信音乐】【FLAC分轨】
- BIGFOUR.2013-大家利事【寰亚】【WAV+CUE】
- 李美凤.1992-情深透全情歌集【EMI百代】【WAV+CUE】
- 田震2024-《时光音乐会》[金峰][WAV+CUE]
- 群星《监听天碟3》[LECD]限量版[WAV+CUE]