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标签中的样式就只在本组件中生效,如: