如何在如何在Vue的父子组件之间传递数据和调用方法的父子组件之间传递数据和调用方法
一、传递数据一、传递数据
有时 在子组件中需要用到父组件的数据
然鹅 在默认情况下 子组件中是无法访问到父组件中的data数据和methods中的方法的
父组件可在在引用的时候通过属性绑定属性绑定(v-bind)的方式将将需要传递给子组件的数据传递给子组件
然后 在子组件中通过props属性进行定义即可
var vm=new Vue({
el:'#app',
data:{
mymsg:"123"
},
methods:{},
components:{
childcom:{
template:"
{{parentmsg}}
",
// 组件中的所有props中的数据都是通过父组件传递给子组件的
// 将父组件传递过来的parentmsg属性在props数组中进行定义 如此 才可使用该数据
props:["parentmsg"] }
}
});
在子组件标签上 用v-bind进行绑定：
其中 子组件中的data和props的区别是：
1、data中的数据是子组件自身的数据子组件自身的数据 和父组件无关
而props里的数据是通过父组件传递给子组件通过父组件传递给子组件的
2、data里的数据是可读可写可读可写的
而props里的数据都是只读只读的 无法重新赋值
二、调用方法二、调用方法
在子组件中调用父组件里面的方法
不仅能调用方法调用方法 还可通过调用方法的方式进行传值传值 将值作为方法的参数进行传递
这个传递的值 包括对象类型
父组件可在在引用的时候通过事件绑定事件绑定(v-on)的方式将将需要传递给子组件的方法传递给子组件
以下为一个子组件调用父组件的方法传递给父组件对象类型的数据的案例：
首先首先 在在Vue实例里定义一个要传递的方法和组件名：实例里定义一个要传递的方法和组件名：
var vm=new Vue({
el:'#app',
data:{
fathermsg:null
},
methods:{
// 将传入的子组件的数据给自己
getData(data)
{
this.fathermsg=data
}
},
// 定义子组件
components:{
mycomponent
}
});
然后然后 定义一个子组件模板对象：定义一个子组件模板对象：
// 定义字面量类型的组件模板对象
评论0