Vue自定义组件

一、组件的创建

在 components 文件夹下新建一个组件 runoob.vue

<template>
  <div>自定义组件</div>
</template>

<script>
export default {
  data () {
    return {

    }
  }
}
</script>

二、组件的引用

1、通过 import 导入组件 runoob.vue

import runoob from '@/components/runoob.vue'

2、在 components 下注册该组件

components: {
  runoob
}

3、在标签中引用

<runoob></runoob>

完整示例：

<template>
  <div id="app">
    <runoob></runoob>
  </div>
</template>

<script>
import runoob from '@/components/runoob.vue'
export default {
  data () {
    return {

    }
  },
  components: {
    runoob
  }
}
</script>

运行结果：

三、组件的自定义属性

 

1、Prop 传属性值

prop 是父组件用来传递数据的一个自定义属性（通过 props 把数据传给子组件）

components/runoob.vue 文件：

<template>
  <div :style="{ color: col }">自定义组件</div>
  <!-- 将接收到的数据应用到标签属性中 -->
</template>

<script>
export default {
  data () {
    return {

    }
  },
  props: {
    col: {
      type: String,
      default: '#000'
    }
  }
  // 接收传过来的数据
}
</script>

views/demo.vue 文件：

<template>
  <div id="app">
    <runoob col="red"></runoob>
    <!-- 在标签中自定义属性值作为要传过去的数据 -->
  </div>
</template>

<script>
import runoob from '@/components/runoob.vue'
export default {
  data () {
    return {

    }
  },
  components: {
    runoob
  }
}
</script>

运行效果：

2、Prop 验证属性值

props: {
  col: {
    type: String,
    default: '#000'
  }
}

这里的 type 可以是下面原生构造器：

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

当 Prop 验证失败时，Vue（基于开发环境构建版本）会产生一个控制台的警告

 

四、组件的自定义事件

父组件使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件

1、$emit(eventName) 触发事件

components/runoob.vue 文件：

<template>
  <div :style="{ color: col }" @click="doWhat">自定义组件</div>
  <!-- 将传进来的数据应用到标签中 -->
  <!-- 绑定点击事件doWhat -->
</template>

<script>
export default {
  data () {
    return {

    }
  },
  methods: {
    doWhat () {
      this.$emit('myMethod')
    }
  },
  // doWhat触发myMethod事件
  props: {
    col: {
      type: String,
      default: '#000'
    }
  }
  // 接收传进来的数据
}
</script>

views/demo.vue 文件：

<template>
  <div id="app">
    <runoob col="red" @myMethod="sayHello"></runoob>
    <!-- 在标签中自定义属性值作为要传过去的数据 -->
  </div>
</template>

<script>
import runoob from '@/components/runoob.vue'
export default {
  data () {
    return {

    }
  },
  methods: {
    sayHello () {
      alert('Hello!')
    }
  },
  // 触发myMethod事件就会调用sayHello
  components: {
    runoob
  }
}
</script>

运行效果：