vue组件的引入

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u011464124/article/details/88883964

App.vue

<template>
  <div id="app">
    <h1>{{ msg }}</h1>

    <!-- 3.在模板中使用 -->
    <v-home></v-home>
    <br>
    <hr>
    <v-news></v-news>

  </div>
</template>

<script>

//1.引入组件
import Home from './components/Home.vue';
import News from './components/News.vue';

export default {
  name: 'app',
  data () {
    return {
      msg: '我是一个根组件'
    }
  },
  //2.挂载组件
  components:{//前面的组件名称不能和html一样
    'v-home':Home,
    'v-news':News
  },
}
</script>

<style lang="scss">

</style>

Home.vue

<!-- 创建一个组件 -->
<template>
  <!-- 所有的内容要被根节点包含起来 -->
   <div>
     <v-header></v-header>
     <hr>
    <h2>这是一个首页组件--{{msg}}</h2>

    <!-- v-on:click="run()" -->
    <button @click='run()'>执行run方法</button>

   </div>
</template>

<script>
//引入头部组件
import Header from './Header.vue';


export default {
   data() {
       return {
         msg:'我是一个首页组件!!!'
       }
   },
   methods:{
     run(){
       alert(this.msg);
     }
   },
  components: {
    'v-header':Header,
  }
}
</script>

<style scoped lang="scss">
/*css scoped 局部作用域 */
  h2{
    color:red,
  }
</style>

News.vue

<template>
   <div>
     <h2>新闻组件</h2>
    <ul>
      <li>
        111111
      </li>
      <li>
        22222
      </li>
      <li>
        33333
      </li>
      <li>
        444444
      </li>
    </ul>

   </div>
</template>

<script>
export default {
   data() {
       return {
         msg:'我是一个新闻组件',
       }
   },
  components: {}
}
</script>

<style scoped lang="scss">

</style>

Header.vue

<template>
   <div>
     <h2 class="header">头部组件</h2>


   </div>
</template>

<script>
export default {
   data() {
       return {
         msg:'我是一个头部组件',
       }
   },
  components: {}
}
</script>

<style scoped lang="scss">
  .header{
    background: #3944e6;
    color: red;
  }
</style>

运行截图：