如题所述
第1个回答 2022-07-24
1.父传子，子接受用props
a.父组件中要做的事情
在父组件中引入子组件：
并在components中声明该组件
b.子组件中要做的事情
在子组件中props的方式接受，这里有两种方法：props:['rules','model'],还有就是图片中对象的方式，只是对象的方式能够设定传值的类型。
在子组件中的使用如第二个红色的标出的部分，直接使用 this.rules
2.子传父，子用$emit（派发自定义事件）
父子组件间传值是单向数据流，即父传子，但是子不能修改被传过来的数值，如果子要修改还需通知父组件来修改（目前学到的内容来说是这样的），所以父传子的时候，是传递事件，并在父组件中调用该函数
a.父组件要做的
在父组件中引入子组件，如图所示
第二幅图，即为绑定的事件传参即为子传给父的数据
b.子组件
3.父子组件数据的双向绑定
在子中改父中也可以检测到，就像v-model一样，（v-model是value="inputvalue" @input="inputHandler"封装的语法糖）
在子组件中的设置：
此处的 :value="inputvalue" @input="inputHandler" 就是实现与父组件双向绑定的关键
a.父组件中要做的事情
在父组件中引入子组件：
并在components中声明该组件
b.子组件中要做的事情
在子组件中props的方式接受，这里有两种方法：props:['rules','model'],还有就是图片中对象的方式，只是对象的方式能够设定传值的类型。
在子组件中的使用如第二个红色的标出的部分，直接使用 this.rules
2.子传父，子用$emit（派发自定义事件）
父子组件间传值是单向数据流，即父传子，但是子不能修改被传过来的数值，如果子要修改还需通知父组件来修改（目前学到的内容来说是这样的），所以父传子的时候，是传递事件，并在父组件中调用该函数
a.父组件要做的
在父组件中引入子组件，如图所示
第二幅图，即为绑定的事件传参即为子传给父的数据
b.子组件
3.父子组件数据的双向绑定
在子中改父中也可以检测到，就像v-model一样，（v-model是value="inputvalue" @input="inputHandler"封装的语法糖）
在子组件中的设置：
此处的 :value="inputvalue" @input="inputHandler" 就是实现与父组件双向绑定的关键
