相关推荐recommended
vue2 组件传递数据
作者:mmseoamin日期:2023-12-21

向子组件传递数据通过Props

1.创建子组件

详细步骤:

1.在components创建子组件

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


2.创建父组件

详细步骤:

1.导入子组件页面路径

2.在components注册组件

3.创建子组件标签

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


  

vue2 组件传递数据,在这里插入图片描述,第1张

效果图

vue2 组件传递数据,在这里插入图片描述,第2张

父传子优化代码

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

vue2 组件传递数据,在这里插入图片描述,第3张

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

子组件

子组件有哪些操作?

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 双向数据绑定绑定

子组件


父组件