秋天，大雁南飞，草木枯荣，掉落下的依依不舍的树叶随着瑟瑟的秋风飞动。尽管田园一片荒凉，但金灿灿的干草已覆盖了整个大地，几颗松树笔直的立在大地上，天空是多么广阔，多么蔚蓝！地是多么浩瀚，多么无边！天和地连在了一起，已分不清地平线在哪里，秋天的原野拥抱着蓝天，广阔的蓝天拥抱着田野！
1.静态传值（在父组件中赋值好props中属性的值传递给子组件）
父组件
<template>
<div>
<input v-model="message">
<child message="hello"></child>
</div>
</template>
<script>
import child from './components/child.vue'
export default{
components:{
child
}
}
</script>
子组件
<template>
<p>{{message}}</p>
</template>
<script>
export default{
props:['message'],
data(){
},
methods:{
fun:function(){
}
}
}
</script>
结果：打印hello
2.动态传递（根据父组件中值的改变，props动态的改变子组件中的值）
父组件
<template>
<div>
<input v-model="message">
<!--将childmessage与message通过v-bind指令绑定!-->
<child v-bind:childmessage="message"></child>
</div>
</template>
<script>
import child from "./components/child.vue"
export default{
//构建child组件
components:{
child
},
data(){
return {
//初始化message
message:''
}
}
}
</script>
2.子组件
<template>
<div>
<p>childmessage is:{{childmessage}}</p>
</div>
</template>
<script>
export default{
//将childmessage传递给child
props:['childmessage']
}
</script>
结果：两者同步改变
以上所述是小编给大家介绍的vue中使用props传值的方法详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
以上就是vue中如何使用props传值的方法。让一个人从你面前消失的最快方法，是你自己先转过身去。更多关于vue中如何使用props传值的方法请关注haodaima.com其它相关文章！
