版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/f120032777/article/details/84313842
父组件向子组件传值
- 父组件调用子组件时,在标签上绑定动态属性
<template>
<div id='parent'>
<v-child :title='title' :run='run'></v-child>
</div>
</template>
<script>
import Child from './Child.vue';
export default{
data(){
return{
msg:'',
title:'我是Parent组件的值'
}
},
methods:{
run(data){
alert('我是Parent组件的run方法 --' + data);
}
},
components:{
'v-child': Child
}
}
</script>
2.子组件通过props方式接受父组件传来的值
<template>
<div id="child">
<p>{{title}}</p>
<button @click="run(123)">点击查看父组件的方法</button>
</div>
</template>
<script>
export default{
data(){
return{
}
},
props:{
title: String, //在props中可以对传来的数据进行类型验证
run: Function,
}
}
</script>
子组件向父组件传值
1. 调用子组件时定义一个ref,如下
<v-child ref='child'><v-child>
2. 在父组件里通过以下方式接收子组件的值
this.$refs.child.属性
this.$refs.child.方法
<template>
<div id="parent">
<v-child ref='child'></v-child>
<button @click='getChildData()'>获取子组件的数据</button>
<br />
<button @click='getChildFunction()'>获取子组件的方法</button>
</div>
</template>
<script>
import Child from './Child.vue';
export default{
data(){
return{
msg: ''
}
},
methods:{
getChildData(){
alert(this.$refs.child.msg); //获取子组件的msg
},
getChildFunction(){
this.$refs.child.run(); //获取子组件的run方法
}
},
components:{
'v-child':Child
}
}
</script>
这只是基础的父子组件传值方式,其它方式会在后面进行补充