vue中使用props传值的方法
编程学习 2021-07-04 15:50www.dzhlxh.cn编程入门
这篇文章主要介绍了vue中使用props传值的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
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传值的方法详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！