передача реквизита компоненту vue2 - PullRequest
Новая
       5

передача реквизита компоненту vue2

0 голосов
/ 05 ноября 2018

Я хочу создать базовый образец отдельного файлового компонента в vue. Я настроил веб-пакет для компиляции моего кода, и он работает нормально. Теперь я хочу передать реквизиты компоненту и получаю сообщение об ошибке, что реквизиты не определены.

индексный файл 

    <head>
    <meta charset="UTF-8">
    <title>Vue Webpack Demo</title>
    <script type="text/javascript" src="/dist/vue.js"></script>
</head>
<body>
    <div id="mainContent">
        <main-content post-title="hello!"></main-content>
    </div>
</body>

<script src="/dist/index.js"></script>

index.js file 

    import Vue from 'vue';
import MainContent from './views/main-content';

let MainComponent = Vue.extend(MainContent);

new MainComponent().$mount("#mainContent");

главный-content.vue 

<template src="./main-content.html"></template>
<style scoped lang="scss" src="./main-content.scss"></style>
<script>
    export default {
        name: "main-content",
        props: {
            postTitle:{
                type:String,
                required:true
            }
        },
        data: () => ({
            webpack: 'Powered by webpack!?',
            name:'name'
        }),
    }
</script>

1 Ответ

0 голосов
/ 05 ноября 2018

Способ настройки приложения неудобен. Оболочки для приложения нет. Следуя приведенному ниже примеру, вы увидите, как можно организовать, чтобы ваш компонент наконец-то получил необходимый проп

.

index.html 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>CodeSandbox Vue</title>
</head>
<body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
</body>
</html>

Файл main.js, в котором создается приложение vue: 

import Vue from "vue";
import App from "./App";

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  components: { App },
  template: "<App/>"
});

Теперь приложение использует ваш компонент MainContent и передает prop: 

<template>
  <MainContent post-title="Hello!"/>
</template>

<script>
import MainContent from "./views/MainContent";

export default {
  name: "App",
  components: {
    MainContent
  }
};
</script>

Наконец компонент читает реквизит: 

<template>
  <div class="hello">
    post-title: {{ postTitle }}
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    postTitle: {
      type: String,
      required: true
    }
  },
};
</script>

Этот пример работает здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...