向子组件传递数据通过Props

1.创建子组件

详细步骤：

1.在components创建子组件

2.等父组件接受到参数后通过Props来接受父组件传递过来的数据

2.创建父组件

详细步骤：

1.导入子组件页面路径

2.在components注册组件

3.创建子组件标签

4.在子组件标签接受子组件传递过来的数据

效果图

父传子优化代码

如果传入的prop很多，可以使用传入整体props对象

案例 父组件输入的内容在子组件展示

子组件

子组件有哪些操作？

1.创建一个新的页面

2.用props来接受父页面传递的参messageFormParent

3.使用{{}} 来展示内容

父组件

1.导入子组件页面

2.注册子页面

3.创建子组件标签

4.在子组件标签中 通过v-bind绑定数据，通过messageFormParent传递出去

5.组件中双向数据绑定 ：这个是父组件input输入框,子组件也跟着展示，父组件通过v-model来绑定

案例 子组件输入的内容在父组件展示 两种写法

第一种写法 通过v-bind绑定事件和v-on监听事件

操作步骤：

1.子组件input输入框通过v-model双向数据绑定；再通过按键事件来监听输入的内容

2.父组件在子组件标签里通过v-bind绑定事件和v-on监听事件

3.在子组件内通过按键监听事件用$emit来接收父组件传递过来的事件和要给父组件传递过去的参数

4.父组件通过监听事件展示子组件传递过来的数据展示

子组件

父组件

也可以通过v-model 双向数据绑定绑定

子组件

父组件