一.父组件向子组件传值
1.创建子组件,在src/components/文件夹下新建一个Child.vue
2.Child.vue的中创建props,然后创建一个名为message的属性
父子组件参数传递
child.png

3.在App.vue中注册Child组件,并在template中加入child标签,标签中添加message属性并赋值
父子组件参数传递
App2.png
4.保存修改的文件,查看浏览器
父子组件参数传递
browser.png

5.我们依然可以对message的值进行v-bind动态绑定
父子组件参数传递
App3.png

此时浏览器中
父子组件参数传递
browser2.png
父组件向子组件传值成功
总结一下:
  • 子组件在props中创建一个属性,用以接收父组件传过来的值
  • 父组件中注册子组件
  • 在子组件标签中添加子组件props中创建的属性
  • 把需要传给子组件的值赋给该属性

二.子组件向父组件传值
1.在子组件中创建一个按钮,给按钮绑定一个点击事件
父子组件参数传递
Child2.png

2.在响应该点击事件的函数中使用$emit来触发一个自定义事件,并传递一个参数
父子组件参数传递
Child3.png

3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法
父子组件参数传递
App4.png

4.保存修改的文件,在浏览器中点击按钮
父子组件参数传递

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-01-26
  • 2021-12-03
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-09-25
  • 2022-12-23
  • 2022-12-23
  • 2022-02-05
  • 2021-09-22
  • 2022-12-23
相关资源
相似解决方案