vue中使用中使用props传值的方法传值的方法
主要介绍了vue中使用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>