Vue组件

Vue 组件的基本写法

一、其实Vue组件和Vue的界面写法很基本一样，主要区别在于子组件和父组件之间的通信问题，首先看下基本的组件写法
com.vue 文件

使用的话就是在App.vue文件里面导入组件，然后注册组件，就可以直接使用了
App.vue文件

使用的时候，就是在App.vue文件里面使用组件的地方，传入这个值就可以了。比如：

//:age == v-bind:age

运行结果：

运行结果2

子组件给父组件通信

这种情况存在于，子组件里面触发一个方法或者事件后，需要通知父组件里面做某些操作，这样的逆向传值，我们可以通过$emit这个来创建监听，有点类似于发起通知操作。
我们现在需要操作com.vue里面的年龄+1按钮操作,改变APP.vue里面的age的值
第一步 com.vue里面创建一个button

年龄+1

第二步 App.vue里面添加一个属性变量age

export default {
  name: "App",
  data() {
    return {
      age: 18
    };
  },

第三步 App.vue使用组件的地方注册这个事件addAge

//@addAge === v-on:addAge

第四步 App.vue 注册方法addAgeM

...
methods:{
    addAgeM:function(){
      this.age++
    }
  }

一个组件有可能会想到在里面插入自定义的代码，比如上面示例中，在我今年xx岁上面添加一个hello world字样，那就需要通过solt实现，见代码：

com.vue

怎么去使用呢，在APP.vue里面

运行的结果：

运行结果3

那如果在上述示例的 我今年xx岁 前后都想加一些自己的代码怎么办？那就需要在添加slot的时候，添加属性name，然后使用的时候，指定这个name就可以了。见代码
com.vue

使用的时候，App.vue

运行的结果

运行结果4

下篇说到VueX实现组件之间的通信