Блог

Я недавно начал использовать vue, код в App.vue

Во второй строке приведенного выше кода я передал строку, которая является hello в качестве атрибута, который фиксируется в приведенном ниже коде App.vue:

   <div class = "container">
    <Header title="Hello"> </Header>
  </div>
</template>

<script>

import Header from './components/Header'
export default {
  name: 'App',
  components: {
    Header,
  }
}
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400amp;display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Poppins', sans-serif;
}
.container {
  max-width: 500px;
  margin: 30px auto;
  overflow: auto;
  min-height: 300px;
  border: 1px solid steelblue;
  padding: 30px;
  border-radius: 5px;
}
.btn {
  display: inline-block;
  background: #000;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  font-size: 15px;
  font-family: inherit;
}
.btn:focus {
  outline: none;
}
.btn:active {
  transform: scale(0.98);
}
.btn-block {
  display: block;
  width: 100%;
}
</style>
 

Заголовок.vue:

     <header>
        <h1>  XYZ {{ title }} </h1>
        
    </header>
</template>


<script>
    export default{
        name: "Header",
        props: {
            title: {
                type: "string"
            }
        }
    }
</script>

<style scoped>
    header{
        display: flex;
        justify-content: space-between;
        align-items: centre;

    }
</style>
 

Обычно ожидаемый результат составляет

Но я получаю чистую страницу.

Я получаю результат, как показано на рис. 1, когда свойство props во 2-м коде выглядит следующим образом props: ['title']

Но я получаю 2-ю картинку, когда реквизит в коде 2, как показано выше(Заголовок.vue). Почему это так?

Различные способы определения реквизита в Vue, это должно помочь https://vuejs.org/v2/api/#props

 // Specify only the prop name
props: ['title', ...]

// Prop name and type in object format
props: { title: String, ... }

// Prop type with default value and other metadata
props: { title: { type: String, default: '' }, ...}
 

Попробуйте изменить type: "string" на type: String