vue中使用props传值的方法
程序员文章站
2023-12-12 22:27:22
1.静态传值（在父组件中赋值好props中属性的值传递给子组件）
父组件
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传值的方法详解整合，希望对大家有所帮助
推荐阅读