问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vuejs props 传function的问题

头像
changes
    9821318

    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新手求大神解答，轻喷！
    vue.js
    阅读 41.8k
    4 个回答
    得票最新
    头像
    Chobits
      7.4k2827
      ✓ 已被采纳
      <!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>
      头像
      499311496
        2.4k148

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

        头像
        zhou_web
          1.6k21326

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

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

          你可以试试

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