zoukankan      html  css  js  c++  java
  • vue-cli 中使用父子之间传值_父组件传值子组件_封装form表单

    vue-cli 中使用父子之间传值_父组件传值子组件_封装form表单

    使用prop属性,(借助v-bind绑定)

    study01.vue 中代码

    <template>
        <div>
            <h3>这里是需求页面</h3>
            <v-form-work ref="form-work" :arrForm="tabsFormData"></v-form-work>
        </div>
    </template>
    <script>
        import Vue from 'vue'
        import Antd, { message,Select } from 'ant-design-vue'
        import 'ant-design-vue/dist/antd.css'
        import vFormWork from '../../components/formWork'
        
        Vue.use(Antd);
    
    
        export default {
            components:{
                vFormWork
            },
            data() {
                return {
                    tabsFormData: [ //图书表单
                        // {typeItem: "表单类型", nameLabel: "输入框label",  "大小", disabled: "是否禁用",handleClick:"操作事件",isActive:"是否开启操作事件,默认不开启"}, 
                        {typeItem: "input", nameLabel: "名字",  "40px", disabled: false}, 
                        {typeItem: "input", nameLabel: "价格",  "40px", disabled: false,handleClick:"priceClick",isActive:true},
                        {typeItem: "input", nameLabel: "作者",  "40px", disabled: true,isActive:false},
                    ],
                }
            },
        };
    </script>
    View Code

    组件formWork.vue 中代码

    <template>
        <div id="">
            <h4>这里是表单操作事件处理</h4>
            <v-form-content ref="form"  :arrForm="arrForm" @priceClick="priceClick"></v-form-content>
        </div>
    </template>
    
    <script>
        import Vue from 'vue'
        import Antd, { message,Select } from 'ant-design-vue'
        import 'ant-design-vue/dist/antd.css'
        import vFormContent from '../components/formContent'
    
        Vue.use(Antd);
        
        export default {
            name: "formWork",
            components:{
                vFormContent
            },
            props:{
                arrForm: {
                    type: Array,
                    required: true,
                    default() {
                        return [
                            {handleClick:test},
                        ]
                    }
                }
            },
            methods:{
                priceClick() {
                    console.log("我是点击事件");
                },
            }
        }
    </script>
    
    <style scoped>
    
    </style>
    View Code

    组件formContent.vue 中代码

    <template>
        <div id="">
            <h5>这里是表单内容</h5>
            <a-form layout="inline">
                <a-form-item :label="item.nameLabel" :key="index" v-for="(item,index) in arrForm">
                    <a-input placeholder="请输入" :disabled="item.disabled" @click="item.isActive?$emit(item.handleClick):''" />
                </a-form-item>
            </a-form>
        </div>
    </template>
    
    <script>
        import Vue from 'vue'
        import Antd, { message,Select } from 'ant-design-vue'
        import 'ant-design-vue/dist/antd.css'
        Vue.use(Antd);
        
        export default {
            name: "formContent",
            props:{
                arrForm: {
                    type: Array,
                },
            }
        }
    </script>
    
    <style scoped>
    
    </style>
    View Code

    vue-cli 中使用父子之间传值_父组件传值子组件_封装button按钮

    vue组件之间传值(01)__父组件传值子组件 props

  • 相关阅读:
    02 基本介绍
    01 概述 网络分层
    04 可扩展
    Java 注解2
    03 高可用
    重拾安卓_00_资源帖
    JavaUtil_09_通用工具类-01_Hutool
    java支付宝开发-01-沙箱环境接入
    java支付宝开发-00-资源帖
    svn_学习_01_TortoiseSVN使用教程
  • 原文地址:https://www.cnblogs.com/dafei4/p/13204450.html
Copyright © 2011-2022 走看看