开始 Vue 之旅--开发项目（二）vue组件通信

墨蓝 2021-09-14 02:08 330阅读 0赞

上篇讲得是简单案例开发（[开始 Vue 之旅--开发项目（一）][Vue _--]），但是我们都知道项目不可能那么简单，会越来越复杂的，这时候我们就要合理的分配，使其项目更加简单明了。

# 一.组件的分配 #

![20170803161804456][]

重要是这俩种划分，但是不管这么划分其做法是一样的。下面我们以页面区域划分来做介绍

# 二.页面区域划分---创建新项目 #

## （一）知识点及步骤 ##

app.vue是入口文件  components注册组件

props 组件之间的通讯

①在组件的components文件里，创建新的页面gfooter.vue/gheader.vue

A.这个文件系统默认标签，这会使组件冲突，vue不知道这是默认标签还是组件，所以不会渲染  
       B.命名尽量不要用“ - ”，否则也会出现错误  
      尽量在前面加上前缀，比如gfooter.vue (g表示组group）

②在入口文件app.vue模板中引入组件

要在<div id="app"></div>中插入

此时调试出出现如下错误，说明这俩个组件还没有注册

![20170804095412957][]

③在<script>里面注册组件

import gheader  from './components/gheader.vue'   
import gfooter  from './components/gfooter.vue'

new Vue(\{  
     components:\{gheader,gfooter\},  
\})

注意：

（1）.import  变量(在app中调用的)   form  目录下的文件(可以用gheader.vue或是gheader)

(2). components与data,watch等并列

⑤渲染成功后，就会显示gheader.vue和gfooter.vue页面的内容

## (二).事列 ##

在之前的列子中操作

（1）.gheader.vue

<template>
      <div class="header">
        <h1>{
       {msg}}</h1>
      </div>
    </template>
    
    <script>
    export default {
      name: 'header',
      data () {
        return {
          msg: '欢迎 来 vue 页面!'
        }
      }
    }
    </script>
    
    
    <style scoped>
    h1, h2 {
      font-weight: normal;
    }
    .header h1{
      background:#f00;
      color:#fff;
      text-align:center;
      width:100%;
    }
    </style>

(2).gfooter.vue

<template>
      <div class="footer">
        <p>{
       {msg}}</p>
      </div>
    </template>
    
    <script>
    export default {
      name: 'footer',
      data () {
        return {
          msg: '底部!'
        }
      }
    }
    </script>
    
    
    <style scoped>
    .footer p{
      background:#ccc;
      line-height:35px;
      font-size:1.2rem;
      color:#f00;
    }
    </style>

(3).app.vue

<template>
      <div id="app">
        <gheader></gheader>
        <div class="index-cnt">
          <h1 v-text="title"></h1>
          <input v-model="newItem" v-on:keyup.enter="addNew"/>
          <ul class="itemslist" >
            <li v-for="(item,index) in items" v-bind:class="{active:index == num}" 
            v-on:click="itemactive(index)">{
       {item.label}}</li>
          </ul>
        </div>
        <gfooter></gfooter>
      </div>
    </template>
    
    <script>  
    import gheader  from './components/gheader.vue' 
    import gfooter  from './components/gfooter.vue'  
    //引入store.js
    import Store from './store.js'
    export default {
      name: 'app',
      data: function () {
        return { 
          title: '水果的种类很多，让我们一起添加：',
          items:Store.fetch(),
          num:0,
          newItem:''
    
        } 
      },
      components:{gheader,gfooter},
      //watch对象监听的方法
      watch:{
        items: {  
            handler: function (items) {
              Store.save(items);
            },  
            deep: true  
        }  
      },
      methods:{
        //添加颜色
        itemactive:function(index) {
          this.num = index;
        },
        addNew:function(){
          //因为列表是数组所以push()
          this.items.push({
            label:this.newItem
          })
          this.newItem=" ";//当enter完后，input的值自动消失(双向绑定的原因)
        }  
      }
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    .itemslist{
      text-align:left;
      line-height:30px;
    }
    .active{
      color:#f00;
    }
    </style>

（4）.最终效果

![20170804100804919][]

## （三）.参数传递 ##

prop 是**单向绑定的**：**当父组件的属性变化时，将传导给子组件**，但是不会反过来。这是为了防止子组件无意修改了父组件的状态  
  
**（1）.父组件(app.vue)传参数给子组件(gfooter.vue)**

①只要在父组件

fathercnt这个变量可以自行定义

②在子组件中

在<script>中传递参数

props: \['fathercnt'\]

在<template>模板中，引入

<p>\{ \{fathercnt\}\}</p>

注意：props是数组，同时与与data,watch等并列

![20170804141102941][]

** (2).子组件(gfooter.vue)传参数给父组件(app.vue)**

子组件要把数据传递父组件，就得用自定义事件:

使用v-on绑定自定义事情  
a.使用 $on(eventName) 监听事件  
b.使用 $emit(eventName) 触发事件

注意：不能用 $on 侦听子组件抛出的事件，而必须在模板里直接用 v-on 绑定

①在app.vue模板中用v-on 绑定

在<template>模板中：

<p>子组件传递过来的参数：\{ \{childwords\}\}</p>

<gfooter  v-on:child-tell-me ="listenToMyBoy"></gfooter>

或是 v-on 简写：@

注意：这个child-tell-me可以自定义

在<script> 中：

methods:\{  
          listenToMyBoy:function(msg)\{  
                 this.childwords = msg;  
          \}    
      \}

②子组件gfooter.vue要触发事件

在<template>模板中：<button v-on:click="onClick">子组件传值给父组件</button>

在<script> 中：

methods:\{  
           onClick:function()\{  
             this.$emit('child-tell-me',this.msg)  
           \}  
     \}

![20170804153209150][]

**（3）兄弟间传值 $bus 中转站**

新建一个js文件作为兄弟组件间传值的中转站（new 一个vue）bus.js

import Vue from 'vue'
    
    export default new Vue

组件children1把值先传到bus

<template>
      <div>
        <button @click="dataToBrother">toBrother</button>
      </div>
    </template>
     
    <script>
      import bus from '../eventBus/bus'
        export default {
            name: "children1",
             data(){
                  return {
                    toBrother:''
                  }
              },
              methods:{
                dataToBrother(){
                      bus.$emit('toBrother',this.toBrother)
                }
              }
        }
    </script>

组件children2从bus接收值

<template>
      <div>
        <h1>{
       {dataFromBrother}}</h1>
      </div>
    </template>
     
    <script>
      import bus from '../eventBus/bus'
        export default {
            name: "children2",
          data(){
              return {
                dataFromBrother:''
              }
          },
          created(){
              bus.$on('toBrother',(data)=>{
                this.dataFromBrother = data;
              })
          }
        }

**（4）provide和inject **  
　　这对选项是一起使用的。以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。组件得引入层次过多，我们的子孙组件想要获取祖先组件得资源，那么怎么办呢，总不能一直取父级往上吧，而且这样代码结构容易混乱。这个就是这对选项要干的事情。  
　　provide:是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。  
　　inject：一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值。

father组件、children组件分别如图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70][]

使用及展示如下（多层级也可以传递）：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 1][]

** （5）$parent和$children**  
　　利用$children可以直接获取子组件的实例，利用$parent则可以直接获取到父组件的实例

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 2][]

代码：[简单vue2开发][vue2]

[Vue _--]: http://blog.csdn.net/gao_xu_520/article/details/76603681
[20170803161804456]: /images/20210813/990d064368454ea6b509cd6ea9cf85a6.png
[20170804095412957]: /images/20210813/71ac3cdfa2c14bf4995fb90389c80d25.png
[20170804100804919]: /images/20210813/ea35f190a6d0440184d9418b801f8cf2.png
[20170804141102941]: /images/20210813/b57822b027344fd19e60bbc2b741ef06.png
[20170804153209150]: /images/20210813/f61e8e1bdce0424cabb2973de25b7c5f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70]: /images/20210813/f52b6c69ef7240edb3f7bccbb588a1b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 1]: /images/20210813/d224503ee8ed4959b981ac0b1642dc8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 2]: /images/20210813/fac4f82a3b3148219a13465b701d0d9d.png
[vue2]: http://download.csdn.net/download/gao_xu_520/9924711