如何使用函数绑定prop值并将其传递给另一个组件

Question

是否可以将道具绑定到函数？ 在下面的示例中，我尝试从主App.vue中的函数获取值，并将其作为prop传递给子组件customComponent。

e.g。 （这个例子不起作用）

App.vue

import customComponent from ‘./custom-component.vue'
<template>
     <custom-component
        v-bind:myValue="geMyValue()"
      ></custom-component>
</template>
<script>
export default {
    name: "Item",
    methods: {
        getMyValue: function() {
            return 1+3;
        }
    }
}
</script>

customComponent.vue

<template>
    <h3 class="some-custom-layout">custom component</h3>
    <input type="button" @click="sendMyValue()" />
</template>
<script>
export default {
    name: “custom",
    props: ['myValue']
    methods: {
        sendMyValue: function() {
            console.log(this.myValue);
        }
    }
}
</script>

Answer 1

这是可能的，但如果要返回值，可能最好使用计算属性：

<template>
     <custom-component
        v-bind:myValue="myValue"
      ></custom-component>
</template>
<script>
export default {
    name: "Item",
    computed: {
        myValue: function() {
            return 1+3;
        }
    }
}
</script>

https://vuejs.org/v2/guide/computed.html