Vue.js 组件+ 自定义指令+路由

<template>
  <div id="app">
    <!-- 使用自定义组件 -->
    <runoob></runoob>

  </div>
</template>

<script>
import vue from 'vue'

// 注册组件
vue.component('runoob', {
  template: '<h1>自定义组件!</h1>'
})

var count=1;
export default {
  name: 'app',
  data(){
    return{
    }
  },
  methods:{
  },
}

</script>

<style scoped>

</style>

<template>
  <div id="app">
    <!-- 使用自定义组件 -->
    <runoob></runoob>

  </div>
</template>

<script>
import vue from 'vue'

var child = {
  template: '<h1>自定义组件!</h1>'
}

var count=1;
export default {
  name: 'app',
  data(){
    return{
    }
  },
  components:{
    'runoob':child
  },
  methods:{
  },
}

</script>

<style scoped>

</style>

<template>
  <div id="app">
    <!-- 使用自定义组件 -->
    <child msg="hello,cyy"></child>

  </div>
</template>

<script>
import vue from 'vue'

vue.component('child',{
  props:['msg'],
  template:'<span>{{msg}}</span>'
})

var count=1;
export default {
  name: 'app',
  data(){
    return{
    }
  },
  methods:{
  },
}

</script>

<style scoped>

</style>

<template>
  <div id="app">
    <input type="text" v-model="info">
    <!-- 使用自定义组件 -->
    <child v-bind:msg="info"></child>

  </div>
</template>

<script>
import vue from 'vue'

vue.component('child',{
  props:['msg'],
  template:'<span>template content: {{msg}}</span>'
})

var count=1;
export default {
  name: 'app',
  data(){
    return{
      info:''
    }
  },
  methods:{
  },
}

</script>

<style scoped>

</style>

<template>
  <div id="app">
    <!-- 使用自定义组件 -->
    <child v-for="(item,index) in list" :key="index" v-bind:msg="item.name"></child>

  </div>
</template>

<script>
import vue from 'vue'

vue.component('child',{
  props:['msg'],
  template:'<span>{{msg}}<br></span>'
})

var count=1;
export default {
  name: 'app',
  data(){
    return{
      list:[
        {
          name:'cyy1'
        },
        {
          name:'cyy2'
        },
        {
          name:'cyy3'
        }
      ]
    }
  },
  methods:{
  },
}

</script>

<style scoped>

</style>

vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propa: number,
    // 多个可能的类型
    propb: [string, number],
    // 必填的字符串
    propc: {
      type: string,
      required: true
    },
    // 带有默认值的数字
    propd: {
      type: number,
      default: 100
    },
    // 带有默认值的对象
    prope: {
      type: object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propf: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexof(value) !== -1
      }
    }
  }
})

<template>
  <div id="app">
    <!-- 使用自定义组件 -->
    <child @add-count="addcount"></child>
    <child @add-count="addcount"></child>
    <p>{{total}}</p>
  </div>
</template>

<script>
import vue from 'vue'

vue.component('child',{
  template:'<button @click="addnum">click me</button>',
  data(){
    return{
      num:0
    }
  },
  methods:{
    addnum(){
      this.num+=1;
      this.$emit('add-count');
    }
  }
})

var count=1;
export default {
  name: 'app',
  data(){
    return{
      total:0
    }
  },
  methods:{
    addcount(){
      this.total+=1;
    }
  },
}

</script>

<style scoped>

</style>

如果你想在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on 。例如：

<my-component v-on:click.native="dothething"></my-component>