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.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年11月20日
2024年11月20日
- 刘紫玲2024《清平调》[低速原抓WAV+CUE]
- 伍佰1998《世界第一等》98绝版收藏EP[WAV+CUE]
- 天乐试机天碟 《终极参考SACD》十大发烧唱片之一[WAV分轨]
- 群星《新说唱2024 第12期 (下)》[320K/MP3][95.27MB]
- 楼兰2024-《楼兰传奇》[低速原抓WAV+CUE]
- 楼兰《楼兰传奇2》2024[低速原抓WAV+CUE]
- 陈果《有了你》UPM24K金碟[日本限量版][WAV+CUE]
- 群星《新说唱2024 第12期 (下)》[FLAC/分轨][506.43MB]
- 李常超 (Lao乾妈)《天生江湖》[320K/MP3][168.84MB]
- 李常超 (Lao乾妈)《天生江湖》[FLAC/分轨][633.83MB]
- 群星《雨果发烧碟二十》UPMAGCD2024[WAV+CUE]
- 刘德丽《赤的疑惑》限量1:1黄金母盘直刻[低速原抓WAV+CUE]
- 柏菲·珞叔作品集《金色大厅2》限量开盘母带ORMCD[低速原抓WAV+CUE]
- Gareth.T《sad songs(Explicit)》[320K/MP3][29.03MB]
- Gareth.T《sad songs(Explicit)》[FLAC/分轨][152.85MB]