Assign static properties in component for Vue JS 2

Question

I'm a little confused about passing static props to components in VUEJS 2 documentation.

https://v2.vuejs.org/v2/guide/components-props.html#Passing-a-Number

<!-- 即使`42`是静态的，我们仍然需要使用v-bind来告诉Vue -->
<blog-post v-bind:likes="42"></blog-post>
<!-- 这是一个JavaScript表达式而不是一个字符串。       -->

<translation :phrase="language.exit" type="body"lines="3"></translation>

If I don't bind this prop, I can't see it in the component template.

<translation :phrase="language.exit" :type="body" :lines="3"></translation>

If I bind it but there is no data in the app, I get an error. They should be static data allocated in the translation component.

<translation :phrase="language.exit" :type="'body'" :lines="'3'"></translation>

Adding single quotes works, but the documentation doesn't show this.

Did I miss something somewhere?

Edit: Add globally registered components

Vue.component('translation', {
  props: ['phrase', 'type', 'lines'],
  template: '<span>{{ phrase }} - {{ type}} - {{ lines }}</span>'
});

Answer 1

Actually, when you write code like this

<translation :phrase="language.exit" type="body" lines="3"></translation>

This means that you bind the type to the string body and the line number to the string 3 and you should be able to pass the component translation's props get them.

But if you write like this

<translation :phrase="language.exit" :type="body" :lines="3"></translation>

The attribute type is invalid because body is not a variable or anything else.

When you write like this

<translation :phrase="language.exit" :type="'body'" :lines="'3'"></translation>

It's exactly the same as the first example, you bind the type with the string body and the line number with the string 3, if you want to bind the type with String binding, line number binding with number, you can try this:

<translation :phrase="language.exit" type="body" :lines="3"></translation>

Hope it helps.