Vue使用子组件和外部组件以及样式

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

Vue如何使用子组件

创建vue文件之后，需要在文件中引入组件

	import comment from '../subcomponent/comment.vue'

然后在父组件的components中要为此子组件注册

export default{
		data(){
			return {
				newsinfo:{}
			};
		},
		created(){
			this.getNewsInfo(this.$route.params.id);
		},
		methods:{
			getNewsInfo(id){
				this.$http.get("lianjia?id="+id).then(result=>{
					console.log(result.body.data)
					if(result.body.status==0){
						this.newsinfo= result.body.data
					}
				})
			}
		},
		//此处即是为子组件注册
		components:{
			"comment-box":comment
		}
	}

接下来就可以在父组件中使用子组件了

	<div >
		<h1>{{newsinfo.title}}</h1>
		<p class="container">
			<span>{{newsinfo.time}}</span>
			<span>{{newsinfo.price}}</span>
		</p>
		<hr />
			<div class="content" v-html="newsinfo.feature">
				
			</div>
		新闻详情--{{this.$route.params.id}}
		
		<hr />
				<!-- 		此处使用组件
		 -->	
 		<comment-box></comment-box>
	</div>

使用外部组件

此处我们使用Mint-UI来举例，例子如下，我们可以在main.js中使用如下语句引入Mint-UI的组件

import { Header, Swipe, SwipeItem } from 'mint-ui'
Vue.component(Header.name, Header)
Vue.component(Swipe.name, Swipe)
Vue.component(SwipeItem.name, SwipeItem)

当然这个Mint-UI是通过npm install来安装引入的

使用外部样式

在main.js中使用

// 导入 MUI 的样式
import './lib/mui/css/mui.min.css'

即可在组件中引入mui的样式