实现父子按钮样式_父子组件

一、父子组件定义

1.什么是父子组件?

在一个组件中又定义了其它组件就是父子组件，其实局部组件就是最简单的父子组件, 因为可以把Vue实例看做是一个大组件，我们在Vue实例中定义了局部组件, 就相当于在大组件里面定义了小组件, 所以局部组件就是最简单的父子组件

最简单的父子组件(局部组件)

2.如何定义其它的父子组件

前面我们说过, 自定义组件中可以使用data, 可以使用methods. 当然自定义组件中也可以使用components，所以我们也可以在自定义组件中再定义其它组件

全局组件定义父子组件

局部组件内定义孙子组件

综上所述：如果以后想要使用父子组件，只需要在父组件中通过components再定义一个子组件，并且记住，子组件只能在定义它的父组件中使用。

二、父子组件中的数据传递

1、父子组件数据传递?

在Vue中子组件是不能访问父组件的数据的,

如果子组件想要访问父组件的数据, 必须通过父组件传递

2、如何传递数据

2.1在父组件中通过v-bind传递数据

传递格式 v-bind:自定义接收名称 = "要传递数据"

2.2在子组件中通过props接收数据

接收格式 props: ["自定义接收名称"]

父子组件中的数据传递

三、父子组件中的方法传递

1.父子组件方法传递?

在Vue中子组件是不能访问父组件的方法的,如果子组件想要访问父组件的方法, 必须通过父组件传递

2.如何传递方法

2.1在父组件中通过v-on传递方法

传递格式 v-on:自定义接收名称 = "要传递方法"

2.2在子组件中自定义一个方法

2.3在自定义方法中通过 this.$emit('自定义接收名称');触发传递过来的方法

注意点: 和传递数据不同, 如果传递的是方法, 那么在子组件中不需要接收

如果传递的是方法, 那么需要在子组件中自定义一个方法

如果传递的是方法, 那么在子组件中直接使用自定义的方法即可

如果传递的是方法, 那么需要在子组件自定义的方法中通过        this.$emit("自定义接收的名称")的方法来触发父组件传递过来的方法

父子组件中的方法传递

流程：点击子组件按钮的时候，会执行子组件定义的方法，然后通过this.$emit触发了父组件传过来的parentsay；然后parentsay对应的就是父组件绑定的say方法，因此实现了父组件的方法实现传递。

3、如何将子组件数据传递给父组件

既然我们可以将父组件的方法传递给子组件，可以在子组件中调用父组件中的方法,那么我们就可以在调用方法的时候给方法传递参数，传递的参数, 就是我们需要传递的数据。

四、组件命名

1、组件中的命名注意点

1.1注册组件的时候使用了"驼峰命名", 那么在使用时需要转换成"短横线分隔命名"

例如: 注册时: myFather  ->  使用时: my-father

1.2在传递参数的时候如果想使用"驼峰名称", 那么就必须写"短横线分隔命名"

例如: 传递时: parent-name="name" ->  接收时: props: ["parentName"]

1.3在传递方法的时候不能使用"驼峰命名", 只能用"短横线分隔命名"

@parent-say="say"  -> this.$emit("parent-say");