Javascript Vue.js:如何在单个文件组件中指定道具?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/36674891/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 19:24:36  来源:igfitidea点击:

Vue.js: How to specify props in single file component?

javascriptmvvmecmascript-6vue.jsvue-component

提问by Alfred Huang

I'm defining a single file component

我正在定义单个文件组件

I want to use propsoption on that component.

我想在该组件上使用props选项。

But where can I add the code?

但是我在哪里可以添加代码?

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

采纳答案by Alfred Huang

After a long time of experiment, I found out a practical solution:

经过长时间的实验,我找到了一个实用的解决方案:

The project file structure:

项目文件结构:

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

Now, we want to access the root component -- App's vm fields inside the sub-component Home.vue, with vue-routeon.

现在,我们要访问根组件 --App子组件内的 vm 字段Home.vuevue-route打开。

main.js:

主要.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:

应用程序.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

主页.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>


Conclusion

结论

Note that the inner prop bound the property on the attribute of the component tag (<router-view>Tag in this case.), NOTdirectly on the parent component.

请注意,内部 prop 将属性绑定在组件标签的属性上(<router-view>在本例中为 Tag。),而不是直接绑定在父组件上。

So, we mustmanually bind the passing props field as an attribute on the component tag. See: http://vuejs.org/guide/components.html#Passing-Data-with-Props

因此,我们必须手动将传递的 props 字段绑定为组件标签上的属性。请参阅:http: //vuejs.org/guide/components.html#Passing-Data-with-Props

Also, notice I used a .syncon that attribute, because the binding is one-way-downby default: http://vuejs.org/guide/components.html#Prop-Binding-Types

另外,请注意我.sync在该属性上使用了 a ,因为默认情况下绑定是单向的http: //vuejs.org/guide/components.html#Prop-Binding-Types

You can see, sharing the status through nesting components is a bit confused. To make a better practice, we can use Vuex.

可以看到,通过嵌套组件共享状态有点混乱。为了更好地实践,我们可以使用Vuex

回答by anthonygore

You can do it like this:

你可以这样做:

app.js

应用程序.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 } })
  }
});

回答by Giesburts

Since a couple of months ago, Vue has its own styleguidefor references and stuff like this. Props are one of the references, actually an essential one.

从几个月前开始,Vue 就有了自己的样式指南,用于引用和诸如此类的东西。道具是参考之一,实际上是必不可少的。

BAD

坏的

props: ['status']

Good

好的

props: {
  status: String
}

Even better

甚至更好

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

You can find more on this here

您可以在此处找到更多相关信息