转载：https://blog.csdn.net/YYxiaobao0726/article/details/86577481
根组件引入其他组件
前言
一个.vue 文件就是一个单独的组件。
在 .vue 文件中， template 中都是html 代码，它定义了在页面中显示的内容，由于里面还有变量，也可以说定义了一个模版；
script中都是js 代码，它定义这个组件中所需要的数据和及其操作；
style 里面是css 样式，定义这个组件的样式，scoped 表明这里写的css 样式只适用于该组件，可以限定样式的作用域。
定义组件及引用组件
在看懂我接下来的代码之前需要先把下面这幅图看懂 ！
图应该很好理解，App.vue是一个根组件。此根组件包含一个首页组件和一个新闻组件，首页组件和新闻组件同时又包含头部组件。那么代码开始了。
App.vue（根组件）
<template> <div id="app"> <v-home></v-home> <!-- 使用Home组件--> <hr> <br> <v-news></v-news> <!-- 使用News组件--> </div> </template> <script> /* 1.引入组件 2.挂载组件 3.在模板中使用 */ import Home from './components/Home.vue'; //引入首页组件 import News from './components/News.vue'; //引入新闻组件 export default { data(){ return { msg:'今天是个好天气' } }, components:{ /* 前面的组件名称不能和HTML标签一样*/ 'v-home':Home, //挂载Home组件 'v-news':News, //挂载新闻组件 } } </script> <style> </style>
越深入学习vue，就会发现根组件越简单，往往都是引入其他的组件。我已在代码中做了很详细的注解。接下来是各个引入的组件。
Home.vue（首页组件）
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div id="home">
<v-header></v-header>
<br>
<h2>这也是一个首页组件---{{msg}}</h2>
<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 lang="css" scoped>
/* css 局部作用域 scoped*/
h2{
color:red;
}
</style>
其组件的定义和使用都是一样的，style中的scoped表示局部作用域，该样式只针对Home.vue 使用。
News.vue（新闻组件）
<template>
<div>
<v-header></v-header>
<h2>这是一个新闻组件</h2>
<ul>
<li>aaaaaa</li>
<li>bbbbb</li>
<li>cccccc</li>
<li>ddddd</li>
</ul>
</div>
</template>
<script>
import Header from './Header.vue';//引入头部组件
export default {
data(){
return{
msg:'我是一个新闻组件'
}
},
components:{
'v-header':Header,
}
}
</script>
<style scoped>
</style>
看到这里应该是知道如何定义和使用组件了吧，News.vue和Home.vue都引用了Header.vue,其步骤也是一样的
Header.vue（头部组件）
<template>
<div>
<h2 class="header">这是一个头部组件</h2>
</div>
</template>
<script>
export default {
data(){
return{
msg:'我是一个头部组件'
}
}
}
</script>
<style scoped>
.header{
background:black;
color: gainsboro;
}
</style>
最后的运行效果是这样的：
例外，还有一个要注意的问题就是导入组件的路径问题，我在导入时也犯了个小错：
父子组件的传递
父子组件的传递
App.vue
<template>
<div id="app">
<v-parent></v-parent>
</div>
</template>
<!--1.引入组件-->
<!--2.挂载组件-->
<!--3.在模板中使用-->
<script>
import Parent from './views/Parents.vue'; //引入父组件
export default {
components:{ /* 前面的组件名称不能和HTML标签一样*/
'v-parent':Parent,
},
}
</script>
<style scoped>
</style>
Parents.vue
<template>
<div>
<h1>Parent</h1>
<v-child v-bind:parentmsg="'from Parent msg'" @showMsg="showMsg"></v-child>
<h5>{{childmsg}}</h5>
</div>
</template>
<script>
import Child from './Child.vue'; //引入子组件
export default {
data(){
return{
childmsg:''
}
},
components:{ /* 前面的组件名称不能和HTML标签一样*/
'v-child':Child,
},
methods:{
showMsg(val)
{
this.childmsg = val
}
},
}
</script>
<style scoped>
</style>
Child.vue
<template>
<div>
<h1>{{ info }}</h1>
<h5>{{ parentmsg }}</h5>
<button @click="passMsg">走你</button>
</div>
</template>
<script>
export default {
data(){
return{
info:'我是子组件'
}
},
props:{
parentmsg:{
type:String,
default:''
},
},
methods:{
passMsg()
{
this.$emit('showMsg','i am from child')
}
},
}
</script>
<style scoped>
</style>
父组件向子组件传递值
1、在父组件的子组件的标签上绑定属性
v-bind:parentmsg="'from Parent msg'"
2、在子组件的配置项中配置props，指定属性，类型，和默认值
props:{
parentmsg:{
type:String,
default:''
},
},
3、在子组件vue文件的template显示
<h5>{{ parentmsg }}</h5>
子组件向父组件传递值
1、在子组件vue文件中，给标签绑定事件
<button @click="passMsg">走你</button>
2、在子组件的配置项中配置methods
methods:{
passMsg()
{
this.$emit('showMsg','i am from child')
}
},
3.在父组件接收
<v-child v-bind:parentmsg="'from Parent msg'" @showMsg="showMsg"></v-child>
data(){
return{
childmsg:''
}
},
methods:{
showMsg(val)
{
this.childmsg = val
}
},
4、在父组件vue template中显示
<h5>{{childmsg}}</h5>