vue(13)新建组件并使用

1.前面的所有例子我们都是将代码写在一个App.vue组件，这个App.vue组件通过main.js将其绑定到index.html中的一个元素标签上。

2.这里写一个组件，将该组件再App.vue组件中使用

3.src目录下新建一个component文件夹，在component文件夹下新建一个HelloWorld.vue文件：

<template>

    <h1>Hello World!</h1>

</template>

<script>

export default ({

})

</script>

<style scoped>

</style>

4.App.vue中使用上面定义的HelloWorld组件：

<template>

    <div>

      {{tag}}

      <HelloWorld></HelloWorld>//子组件显示在页面

    </div>

</template>

<script>

import HelloWorld from './component/HelloWorld'//引入组件

export default {

   name:"App",

   data:function(){

       return {

         tag:'篮球'

       };

   },

   components:{//组件作为一个子组件放入components中

       HelloWorld

   },

   computed:{

       

   },

   methods:{

      

   }

}

</script>

<style scoped>

</style>

5.如果在子组件和父组件的style标签中都有同名的样式，那么在给标签使用样式时会出现到底使用哪个组件中定义的样式的冲突。解决的方法是在style标签中加入scoped属性，这样定义在style标签中的样式就只在本组件中生效，如：

<style scoped>

</style>