Vue 组件的基本写法

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

<template>
  <div>我是组件 </div>
</template>
<script>
export default {
  };
</script>
<style lang="stylus"></style>

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

<template>
  <div id="app">
   <Com />
  </div>
</template>
<script>
import Com from "./components/com";
import "./components/n";
export default {
  name: "App",
  data() {
    return {     
    };
  },
  components: {
    Com
    },
  };

运行的结果如图：

组件运行结果1

组件通信

一个组件显示的内容不可能都是写死的，日常开发中肯定会遇到很多需要外面传值到组件内部的情况，这种传值就是需要通过props来实现。在组件com.vue文件里面的export default里面设置需要传的参数，如

 <template>
  <div>我今年{{age}}岁 </div>
</template>
<script>
export default {
  props:['age']
  };
</script>
<style lang="stylus"></style>

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

//:age == v-bind:age
<Com  :age=18 />

运行结果：

运行结果2

子组件给父组件通信

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

<button type="button" name="button" @click="$emit('addAge')">年龄+1</button>

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

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

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

//@addAge === v-on:addAge
<Com v-bind:age={{age}} @addAge="addAgeM" />

第四步 App.vue 注册方法addAgeM

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

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

com.vue

<template>
  <div>
    <slot></slot>
    我今年{{age}}岁
    <!-- com {{age}} -->
    <button type="button" name="button" @click="$emit('addAge')">年龄+1</button>
  </div>
</template>

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

<template>
  <div id="app">
    <Com v-bind:age="age" v-on:addAge="addAgeM">
      <h1>Hello World</h1>
    </Com>
  </div>
</template>

运行的结果：

运行结果3

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

<template>
  <div>
    <slot name="slotA"></slot>
    我今年{{age}}岁
    <!-- com {{age}} -->
    <button type="button" name="button" @click="$emit('addAge')">年龄+1</button>
    <slot name="slotB"></slot>
  </div>
</template>

使用的时候，App.vue

<template>
  <div id="app">
    <Com v-bind:age="age" v-on:addAge="addAgeM">
      <h1 slot="slotA">我在上面</h1>
      <h1 slot="slotB">我在下面</h1>
    </Com>
  </div>
</template>

运行的结果

运行结果4

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