父子组建传值_vue-父子组件传值

父组件传给子组件：子组件通过props方法接收数据

子组件传给父组件：通过$emit方法传递参数

一、props方法：

1.静态传值：

父组件中子组件的标签设置一个自定义属性并赋值：

子组件中通过props方法接收

export default{

props:['message']

}

可以显示到页面上

{{message}}

2.动态传值：(根据父组件中值的变化，动态改变子组件中的值)

父组件中属性双向绑定：

data(){return{

hello:"hello"//初始值

}

}

子组件不变；

二、通过ref实现页面间的通信

1.静态传值

父组件中设置ref属性和getMessage方法：

mounted:function() {

console.log(this.$refs.msg);this.$refs.msg.getMessage('我是子组件一！')

}

}

子组件通过getMessage方法显示在页面中：

{{message}}

data(){return{

message:''}

},

methods:{

getMessage(m){this.message=m;

}

}

}

prop和ref之间的区别：

prop着重于数据的传递，他不能调用子组件里的数据和方法，想创建文章组件时，自定义标题和内容这样的使用场景最适合prop；

ref着重于索引，主要用来调用子组件里的数据和方法，其实比并擅长数据的传递，而且ref用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。

2.父组件调用子组件的属性和方法

子组件中的属性与方法：

{{message}}

data(){return{

message:'aaaaa'}

},

methods:{

fun(){

console.log(this.message)

console.log("调用了组件1的方法")

}

}

}

父组件中调用：

exportdefault{

data(){return{

}

},

methods: {

handleClick(){this.$refs.msg.fun();//调用子组件的方法

console.log(this.$refs.msg.message)//获取子组件的属性

}

},

components: {

simple1

},

mounted () {this.handleClick();

}

}

三、$emit方法实现通信

$emit(event,arg)

event为绑定的一个自定义事件，当他执行的时候将他的参数arg传递给父组件，父组件通过@event事件监听并接收参数。

1.静态传值

在子组件中：

template>

这是子组件

data(){return{

}

},

mounted () {this.$emit('getFun','这里是要传的参数')

}

}

在父组件中：

{{title}}

exportdefault{

data(){return{

title:''}

},

methods: {

showMsg(title){this.title=title;

}

},

components: {

simple1

}

}

2.动态传值

子组件中：

这是子组件

传值

data(){return{

arg:''}

},

methods:{

fun(){this.$emit('getFun',this.arg)

}

}

}

父组件不变；

Vue的项目中，如果项目简单， 父子组件之间的数据传递可以使用  props 或者 $emit 等方式 进行传递；

但是如果是大中型项目中，很多时候都需要在不相关的平行组件之间传递数据，并且很多数据需要多个组件循环使用。这时候再使用上面的方法会让项目代码变得冗长，并且不利于组件的复用，提高了耦合度。

Vue 的状态管理工具 Vuex 完美的解决了这个问题。

原文：cnblogs.com/hlyin/p/10608660.html