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

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

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

    study01.vue 中代码

    <template>
        <div>
            <header-btn @handleSave="handleSave" @handleSubmit="handleSubmit" :headerBtns="headerBtns"/>
        </div>
    </template>
    
    <script>
        import HeaderBtn from "../../components/headerBtn.vue";
    
        export default {
            components: {
                HeaderBtn,
            },
            data() {
                return {
                    headerBtns: [
                        {type: 'primary', icon: 'save', name: '保存', handleClick: 'handleSave'},
                        {type: 'primary', icon: 'check-submit', name: '提交', handleClick: 'handleSubmit'},
                    ],
                }
            },
            methods: {
                handleSave() {
                    console.log("handleSave");
                },
                handleSubmit() {
                    console.log("handleSubmit");
                }
            },
        }
    </script>

    02)  组件headerBtn.vue  中代码

    <template>
        <div>
            <button v-for="(item,index) in headerBtns" :key="index" @click="$emit(item.handleClick)">
                {{ item.name}}
            </button>
        </div>
    </template>
    
    <script>
        export default {
            name: "headerBtn",
            props: {
                headerBtns: {  //父组件没有传参时,使用这个
                    type: Array,
                    default() {
                        return [
                            {type: 'primary', icon: 'goBack', name: '返回', handleClick: 'handleBack'},
                            {type: 'primary', icon: 'save', name: '保存', handleClick: 'handleSave'},
                            {type: 'primary', icon: 'check-submit', name: '提交', handleClick: 'handleSubmit'},
                        ]
                    }
                }
            }
        }
    </script>
    
    <style scoped>
    
    </style>

    这样就能封装一个button按钮,并带有点击事件

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

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

  • 相关阅读:
    Serverless 动态博客开发趟“坑”记
    tsv与csv文件
    zypper
    source、sh、./三种执行方式对脚本变量的影响
    linux nm
    ldconfig
    cpio
    License简介
    rpm之spec文件
    使用rpmbuild制作rpm包
  • 原文地址:https://www.cnblogs.com/dafei4/p/13196644.html
Copyright © 2011-2022 走看看