vuejs props 传function的问题

vuejs中用组件的props怎么传个function过去呢?

<show-modal :show.sync="showModal" fns='function(){alert(123)}'>
    <!--
      you can use custom content here to overwrite
      default content
    -->
    <h3 slot="header">custom header</h3>
    <div slot='footer'>
        <button @click='oKfns' class="modal-default-button">
            OK
        </button>
        <button @click='showModal = false' class="modal-default-button">
            CANCEL
        </button>
    </div>
</show-modal>

我的想法是fns传过去一个方法,然后组件内部使用这个方法



    <template lang="html">
    <div class="modal-mask" v-show="show" transition="modal">
        <div class="modal-wrapper">
            <div class="modal-container">
                <div class="modal-header">
                    <slot name="header">
                        default header
                    </slot>
                </div>

                <div class="modal-body">
                    <slot name="body">
                        default body
                    </slot>
                </div>

                <div class="modal-footer">
                    <slot name="footer">
                        default footer
                        <button class="modal-default-button"
                        @click="show = false">
                            OK
                        </button>
                        <button class="modal-default-button"
                        @click="fns">
                            cancel
                        </button>
                    </slot>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {}
    },
    props: {
        show: {
          type: Boolean,
          required: true,
          twoWay: true
        },
        fns : {
            type : Function
        }
    }
}
</script>

clipboard.png


现在是会报这个错~
vuejs新手求大神解答,轻喷!




阅读 41.8k
4 个回答
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="app">
        <com1 :func="func"></com1>
    </div>

    <script src="http://cdn.bootcss.com/vue/1.0.17/vue.js"></script>

    <script>
        'use strict';

        Vue.component('com1', {
            template: '<div><com1 :func="func"></com1></div>',
            name: 'com1',
            props: {
                func: Function
            },
            created() {
                this.func()
            }
        })

        new Vue({
            el: '#app',
            data() {
                return {
                    func: function () {
                        console.log(this)
                    }
                }
            }
        })
    </script>
</body>
</html>

fns='function(){alert(123)}' 传下去的是字符串
:fns='function(){alert(123)}' 传下去的才是一个函数。

可以把你的function放在methods里图片描述

然后在组件里使用图片描述

你可以试试

  props:{
    loadFilter: {
      type: Function,
      default: (res) => {
        return {
          res: ''
        }
      }
    }
  },
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏