Vue笔记：Vue中使用组件

 转载：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>