首页 > 其他 > 详细

第十课本文件内容：组件的引入、挂载与使用

时间：2021-04-07 12:20:31 阅读：15 评论：0 收藏：0 [点我收藏+]

Home.vue 和News.vue都挂在Header.vue

Header.vue

<template>

<div id="header">

<h2 class="header">这是一个头部组件</h2>

</div>

</template>

<script>

export default {

data(){

return{

msg:‘这是一个头部组件‘

}

}

};

</script>

<style lang="scss">

.header{

background:#000;

color:#fff;

}

</style>

Home.vue

<template>

<div id="home">

<v-header></v-header>

<hr>

<h2>这是一个首页组件--{{msg}}</h2>

<button @click="run()">执行run方法</button>

</div>

</template>

<script>

//引入头部组件

import Header from ‘./Header.vue‘;

export default{

data(){

return {

msg:‘我是一个首页组件msg‘

}

},

methods:{

run(){

alert(this.msg);

}

},

components:{

‘v-header‘:Header

}

}

</script>

<style lang="scss" scoped>

/*css 局部作用域 scoped*/

h2{

color:red

}

</style>

News.vue

<template>

<div>

<v-header></v-header>

<h2>这是一个新闻组件</h2>

<ul>

<li >

111111

</li>

<li>

2222

</li>

<li>

333333

</li>

</ul>

</div>

</template>

<script>

//引入头部组件

import Header from ‘./Header.vue‘;

export default {

data(){

return{

msg:‘我是一个新闻组件‘

}

},components:{

‘v-header‘:Header

}

};

</script>

<style lang="scss">

</style>

App.vue

<template>

<div id="app">

<v-home></v-home>

<hr >

<v-news></v-news>

</div>

</template>

<script>

// 1、引入组件

import Home from ‘./components/Home.vue‘;

import News from ‘./components/News.vue‘;

export default {

data () {

return {

msg:‘你好vue‘

}

},

// 2、挂载组件

components:{ /*前面的组件名称不能和html标签一样*/

‘v-home‘:Home,

‘v-news‘:News

}

}

</script>

<style lang="scss">

</style>

第十课本文件内容：组件的引入、挂载与使用

原文：https://www.cnblogs.com/netflix/p/14626617.html

踩

(0)

赞

(0)

举报

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)

最新文章

更多>

教程昨日排行

更多>

友情链接

汇智网 PHP教程插件网

关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com

© 2014 bubuko.com 版权所有

打开技术之扣，分享程序人生！