组件传值

1.父级向子级传递数据

2.子级向父级传递数据

3.非父子级传递数据

组件传值：

父子级的概念是，A组件如果包含B组件标签，则称A是B的父级。

父级向子级传递的数据

格式是属性传递（所以用双花括号来表达数据，用"："来绑定标签）

首先需要在父级中单向引入子级，然后需要在子级中加入props属性，props是一个字符串数组，里面的值为父级传递过来的属性名

App.vue为父级

Child.vue为子级

子级向父级传递数据：

运行事件传递（@来绑定标签）

比如说我现在想写一个功能，一个子级的按钮button，点击它的时候，把子级的数据传递给父级，然后父级的数据变成子级的一个数据。

先在父级中定义一个自定义事件，然后在子级定义一个按钮，然后绑定点击（@click）发生的方法，在子级中定义这个方法，然后在这个方法中调用方法

this.$emit("toParent",this.msg);

其中

//$emit方法可以触发父级（App.vue）的自定义事件，也就是进行了绑定，向自定义事件toParent传递数据
//$emit方法需要两个参数，1、要绑定的父级中的自定义事件，2、所要传递的数据
//可以这样理解，因为我在App中的Child标签中自定义了事件toParent
//然后我又在Child中调用了方法this.$emit，所以App就通过Child联系起来了

然后，分别在子级，父级中定义变量，用来存放数据（一般都充当容器的作用），自己的变量用来存放要给父级传递数据，父级的变量用来接收子级传来的数据。

点击过后：