vue中组件通信

时间：2019-08-26 22:48:46 阅读：99 评论：0 收藏：0 [点我收藏+]

标签：通信 this 一个绑定 mit 程序 fragment 数据数据验证

组件的通信

　　1. 父子组件通信

　案例:

//父子组件通信思路

// 1 将父组件的数据传给子组件在子组件上自定义单项数据绑定

// 2 子组件用props 接受自定义的那个:号属性

Vue.component(‘father‘,{

template:‘#father‘,

data(){//组件中一个data数据必须是一个函数

return {

money:1000

}

})

Vue.component(‘son‘,{

template:‘#son‘,

props:[‘hello‘]

//props:[‘money‘]

// props:{//数据验证

// ‘monery‘:Number

// }

})

子父组件通信

//定义组件

Vue.component(‘father‘,{

template:‘#father‘,

data(){

return {//用来接受子组件给的数据

shou:0

}

methods:{//在父组件中定义事件处理程序方法然后将父组件的方法已自定义的形式绑定在子组件身上 son

fn(da){//接受子组件参数

this.shou=da

}

})

Vue.component(‘son‘,{

template:‘#son‘,

data(){//先子组件的数据

return {

money:5000

}

methods:{

givehongbao(){

this.$emit(‘give‘,this.money)

//通过this.$emit 发送两个参数参数1 自定义的那个方法名give 参数2子组件传的数据 money

}

})

vue中组件通信

标签：通信 this 一个绑定 mit 程序 fragment 数据数据验证

原文地址：https://www.cnblogs.com/wanghsing/p/11415393.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行