vue2组件引入

<template>
  <div class="hello">

  <h2> {
  { userName }} </h2>
  <input type="button" value="修改用户名" @click="changeName">
  <left class="tt"></left>
  <right class='tt'/>
  <img :src="tt" alt="">
  </div>
</template>

<script>
import left from '@/components/left.vue'   /*需要引入组件 */
import right from '@/components/right.vue'

export default {
  name: 'HelloWorld',
  components: {
    left,/* 简写模式 注册组件*/
    'right':right
  },

  data(){
    return {
      userName:"admin",
      tt:'@/assets/logo.png'
    }
  },
  methods:{
    changeName(){
      this.userName="数据变化"+Math.random()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scope