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
Vue.js: How to specify props in single file 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-route
on.
现在,我们要访问根组件 --App
子组件内的 vm 字段Home.vue
,vue-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 .sync
on 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