欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue自定义组件和组件传值(父传子、子传父、子传子)

程序员文章站 2022-03-22 10:25:15
一、Vue自定义组件1、在src中components中,新建Header.vue组件(首字母建议大写)2、Header.vue3、在app.vue中引用组件第一步引入组件第二步在export default注册组件第三步使用组件运行结果:二、Vue组件组件传值:父传子、子传父、子传子Vue常用的三种传值方式有:父传子子传父非父子传值1. 父组件向子组件进行传值父组件:子组件:运行结果:2. 子组件向父组件传值子组件:父组件:运行结果:...

一、Vue自定义组件

1、在src中components中,新建Header.vue组件(首字母建议大写)
Vue自定义组件和组件传值(父传子、子传父、子传子)

2、Header.vue

Vue自定义组件和组件传值(父传子、子传父、子传子)

3、在app.vue中引用组件
第一步引入组件

Vue自定义组件和组件传值(父传子、子传父、子传子)
第二步在export default注册组件

Vue自定义组件和组件传值(父传子、子传父、子传子)
第三步使用组件

Vue自定义组件和组件传值(父传子、子传父、子传子)
运行结果:

Vue自定义组件和组件传值(父传子、子传父、子传子)

二、Vue组件组件传值:父传子、子传父、子传子

Vue常用的三种传值方式有:
父传子
子传父
非父子传值

1. 父组件向子组件进行传值
父组件:

Vue自定义组件和组件传值(父传子、子传父、子传子)
Vue自定义组件和组件传值(父传子、子传父、子传子)

Vue自定义组件和组件传值(父传子、子传父、子传子)
Vue自定义组件和组件传值(父传子、子传父、子传子)

子组件:

Vue自定义组件和组件传值(父传子、子传父、子传子)

运行结果:

Vue自定义组件和组件传值(父传子、子传父、子传子)

2. 子组件向父组件传值
子组件:

Vue自定义组件和组件传值(父传子、子传父、子传子)
Vue自定义组件和组件传值(父传子、子传父、子传子)

父组件:

Vue自定义组件和组件传值(父传子、子传父、子传子)

Vue自定义组件和组件传值(父传子、子传父、子传子)
Vue自定义组件和组件传值(父传子、子传父、子传子)
Vue自定义组件和组件传值(父传子、子传父、子传子)

运行结果:

Vue自定义组件和组件传值(父传子、子传父、子传子)

3. 非父子组件进行传值

非父子组件之间传值,需要定义个公共的公共实例文件bus.js,作为中间仓库来传值,不然路由组件之间达不到传值的效果。

公共bus.js
Vue自定义组件和组件传值(父传子、子传父、子传子)

组件A:
Vue自定义组件和组件传值(父传子、子传父、子传子)
组件B:
Vue自定义组件和组件传值(父传子、子传父、子传子)

本文地址:https://blog.csdn.net/Idvms/article/details/107533756