Vue自定义组件及组件传值

vue自定义组件:

1、在src中components中,新建文件,后缀名为.vue组件（首字母建议大写）例如:Weekly.vue

2、Weekly.vue:

3、在app.vue中引用组件:

js中先引入

// 第一步引入组件

import Weekly from './components/Weekly.vue'

// 第二步在export default注册组件

  components: {

    Weekly

  }

<Weekly>Weekly>

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

Vue常用的三种传值方式有：

• 父传子

• 子传父

• 非父子传值

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

父组件：



子组件：

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

子组件：



父组件：

3. 非父子组件进行传值:

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

公共bus.js:
import Vue from 'vue'
export default new Vue()

组件A：



组件B：