Vue.js: Как указать реквизиты в одном файле?

21

Я определяю отдельный файл

Я хочу использовать реквизит для этого компонента.

Но где я могу добавить код?

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // note: changing this line won't causes changes
      // with hot-reload because the reloaded component
      // preserves its current state and we are modifying
      // its initial state.
      msg: 'Hello World!'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
  color: #42b983;
}
</style>
    
задан Alfred Huang 17.04.2016 в 11:37
источник

3 ответа

17

После долгого эксперимента я нашел практическое решение:

Структура файла проекта:

src/
  assets/
  components/
    Home.vue
  App.vue
  main.js
package.json
config.js
index.html

Теперь мы хотим получить доступ к корневому компоненту - App vm-поля внутри подкомпонента Home.vue , vue-route on.

main.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'

Vue.use(VueRouter);

let router = new VueRouter();

router.map({
    '/': {
        name: 'home',
        component: require('./components/Home')
    }
});

router.start(App, 'body');

App.vue:

<template>

    <p>The current path: {{ $route.path }}.</p>
    <p>Outer-Value: {{ outer_var }}</p>
    <hr/>

    <!-- The below line is very very important -->
    <router-view :outer_var.sync="outer_var"></router-view>

</template>

<script>
    import Home from './compnents/Home.vue'

    export default {
        replace: false,
        components: { Home },
        data: function() {
            return {
                outer_var: 'Outer Var Init Value.'
            }
        }
    }
</script>

Home.vue

<template>
    <div>
        <p><input v-model="outer_var" /></p>
        <p>Inner-Value: {{ outer_var }}</p>
    </div>
</template>

<script>
    export default {
        // relating to the attribute define in outer <router-view> tag.
        props: ['outer_var'],
        data: function () {
            return {
            };
        }
    }
</script>

Заключение

Обратите внимание, что внутренний prop привязывает свойство к атрибуту тега компонента ( <router-view> Tag в этом случае.), NOT непосредственно на родительском компоненте.

Итак, мы должны вручную привязать поле передающего реквизита как атрибут тега компонента. См .: Ссылка

Также обратите внимание, что я использовал .sync для этого атрибута, потому что привязка по умолчанию односторонняя вниз : Ссылка

Вы можете видеть, что совместное использование статуса через компоненты вложенности немного запутано. Чтобы сделать лучшую практику, мы можем использовать Vuex .

    
ответ дан Alfred Huang 17.04.2016 в 16:41
  • Предпочитайте тег vue.js вместо тега vuejs, потому что первый приближается к 1k вопросов, а последний не имеет даже 10 вопросов, на самом деле его нужно сжечь. Вы получите гораздо больше внимания с этим;) –  Yerko Palma 21.04.2016 в 16:27
  • @YerkoPalma, ха-ха, вы замечаете эту точку ... На самом деле я хочу получить 5 баллов по этому тегу, а затем создать синонимы ... Все предназначено для блестящего блестящего значка .. Не могли бы вы дать мне один момент для цели? –  Alfred Huang 03.05.2016 в 17:55
14

Вы можете сделать это следующим образом:

app.js

<template>
  <div class="hello">
    <h1>{{ parentMsg }}</h1>
    <h1>{{ childMsg }}</h1>
  </div>
</template>

<script>
export default {
  props: ['parentMessage'],
  data () {
    return {
      childMessage: 'Child message'
    }
  }
}
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  data() {
    return {
      message: 'Parent message'
    }
  },
  render(h) {
    return h(App, { props: { parentMessage: this.message } })
  }
});
    
ответ дан anthonygore 04.10.2016 в 10:21
  • Это похоже на синтаксис машинописного текста для меня, я прав? Как выглядел в простом JS? Например, с требованием. –  Michael Czechowski 22.02.2017 в 18:48
  • @NEXTLEVELSHIT Для меня это просто JS, но в среде Vue. es2015, вероятно, через Бабеля. –  Michael Giovanni Pumo 21.05.2017 в 00:56
4

Так как пару месяцев назад у Vue есть свой стиль для и ссылки на подобные вещи. Опоры - одна из ссылок, на самом деле важная.

BAD

props: ['status']

Хорошо

props: {
  status: String
}

Еще лучше

props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

Подробнее об этом здесь можно найти здесь

    
ответ дан Gijsberts 17.01.2018 в 09:20