Vue.js: 단일 파일 구성 요소에서 소품을 지정하는 방법?

Vue.js: 단일 파일 구성 요소에서 소품을 지정하는 방법?

단일 파일 구성 요소를 정의하는 중

나는 그 부품에 소품 옵션을 사용하고 싶다.

그런데 어디에 코드를 추가할 수 있을까?

<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>

오랜 실험 끝에 다음과 같은 실질적인 해결책을 찾아냈다.

프로젝트 파일 구조:

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

이제, 우리는 루트 컴포넌트에 접근하고자 한다.App하위 구성 요소 내의 의 vm 필드Home.vue, 와 함께.vue-route에 관하여

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>

홈뷰

<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>

---

결론

내부 프로펠러는 구성 요소 태그의 속성에 속성을 바인딩했다는 점에 유의하십시오.<router-view>이 경우에는 태그를 추가하십시오.), 상위 구성 요소에 직접 태그 지정하지 마십시오.

따라서 우리는 전달 소품 필드를 구성요소 태그의 속성으로 수동으로 바인딩해야 한다.http://vuejs.org/guide/components.html#Passing-Data-with-Props을 참조하십시오.

또한, 내가 a를 사용했다는 것을 알아차렸다..sync이 속성에서 바인딩은 기본적으로 단방향 다운이기 때문에 http://vuejs.org/guide/components.html#Prop-Binding-Types

보시다시피, 보금자리를 통해 상태를 공유하는 것은 약간 혼란스럽다.더 나은 연습을 위해, 우리는 Vuex를 사용할 수 있다.

이렇게 하면 된다.

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 } })
  }
});

몇 달 전 부터, 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
    }
  }
}

자세한 내용은 여기를 참조하십시오.

참조URL: https://stackoverflow.com/questions/36674891/vue-js-how-to-specify-props-in-single-file-component