美文网首页
vue 父子组件通信

vue 父子组件通信

作者: 杰出噜 | 来源:发表于2018-12-05 16:41 被阅读0次

vue设计模式是数据流在组件之间是单向流动,组件内部是数据双向绑定,

父组件一般会通过props绑定数据传递给子组件;

<parent-component  :props_data=props_data/>

子组件通过props接受父组件传递过来的值;

<child-component/>

export default{

name:'child-component',

props:['props_data']

data(){

return{

name:'小白'

}

}

}

props基本形式(不能传递对象,只改变了索引,数据会上下都改变,如果传递的是对象的话必须深拷贝,建议再计算属性computed改变)

props设置类型和默认值

props:{

propA: {

      type: Number,

      default: 100,//默认值是100;

    },

propB: {

      type: String,

      required: true//是否必须传递;

    },

}

在组件中直接使用this.propA

父子组件之间方法相互调用

子组件调用父组件的方法

<parent-component @set_data=set_data/>父组件中定义子组件中调用的方法,方法名可以不一样,

<child-component/>

export default{

name:'child-component',

data(){

return{

name:'小白'

}

},

methods:{

onclick(){

this.$emit('set_data',params)//父组件接受子组件的的传递参数

}

},

}

父元素调用子组件的方法

<child-component ref='childModel'/>

methods:{

onclick(){

this.ref['childModel'].$emit('child_mothod',params)

}

}

这种写的话在子组件生命周期中监听就可以了

mounted(){

this.$on('child_mothod',(params)=>{

console.log('调用方法后传递的参数',params)

})

}

methods:{

onclick(){

this.ref['childModel'].child_mothod(params)

}

}

这样写的话在子组件直接方法中直接接受就可以了

methods:{

child_mothod(params){

console.log('父组件传递的参数',params)

}

}

相关文章

  • Vue相关知识点

    1、vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不...

  • Vue如何实现组件通信?

    Vue组件通信的三种情况: 父子通信 爷孙通信 兄弟通信 父子通信:父组件使用Prop向子组件传递数据,子组件通过...

  • vue组件间通信的一些实用方法(VUE2.x)

    vue组件间通信的一些实用方法(VUE2.x) 一、父子组件间通信 常用的父子组件通信方法,一般涉及props和$...

  • vue2中eventbus遇到的坑

    前言 vue组件非常常见的有父子组件通信,兄弟组件通信。而父子组件通信就很简单,父组件会通过 props 向下传数...

  • Vue事件总线(EventBus)使用详细介绍

    前言 vue组件非常常见的有父子组件通信,兄弟组件通信。而父子组件通信就很简单,父组件会通过 props 向下传数...

  • Vue事件总线(EventBus)

    vue组件非常常见的有父子组件通信,兄弟组件通信。而父子组件通信就很简单,父组件会通过props向下传数据给子组件...

  • VUE - EventBus

    vue组件非常常见的有父子组件通信,兄弟组件通信。而父子组件通信就很简单,父组件会通过 props 向下传数据给子...

  • VUE组件(传值,生命周期)

    VUE生命周期 VUE子传父组件通信 VUE非父子组件传值

  • 09-生命周期及非父子组件间的通信

    一. Vue生命周期 二、生命周期代码 三、非父子组件通信 vue中非父子组件通信需要借助一个空的vue实例,案...

  • Vue组件通信

    Vue 组件之间的通信,通常我们遇到的都是父子组件之间的通信 一、父子组件传参 子组件定义 Props 属性; 父...

网友评论

      本文标题:vue 父子组件通信

      本文链接:https://www.haomeiwen.com/subject/ktswcqtx.html