javascript - VueJS 发送带空格的组件 props

Question

我想从我的 View 发送组件 Prop ，但有一个空格，它使 vue 返回我 vendor.js:695 [Vue warn]: 编译模板时出错: - 无效表达式::user-name="厉害了我”
- 无效表达式::user-name="Awesome Me"

我的观点:

<ActionButton :id="1"
          :user-name="Awesome Me"
          :main="1" />

我的组件:

<script>
    export default{
        props: {
            id: {
                type: String
            },
            userName:{
                type: String
            },
            main: {
                type: Boolean
            }
        },
        methods: {
            setAsMain(id){
                // some stuff
            },

        },
        computed: {
            mainMessage(){
                return this.main == 1 ? 'Main character' : '';
            }
        }
    }
</script>

如何发送包含空格的用户名值？

Answer 1

我认为问题不在于空间，您在传递静态数据时使用 v-bind 或 : 与 props，所以不需要这些，只是执行以下操作:

<ActionButton id="1"
          user-name="Awesome Me"
          main="1" />