H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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新手求大神解答,轻喷!




回答:

<!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: ''
        }
      }
    }
  },

本文地址:H5W3 » vuejs props 传function的问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址