首页 > > 网页制作 > Javascript >

vue学习记录⑤（组件通信-父与子）

2018-06-24 00:21:44来源：未知阅读 ()

今天我们看一下组件通信。

经过前面几篇文章，我们已经可以构建出完整的单个组件，并利用路由使其串联起来访问了。

但这明显还是不够的。一个页面不可能就是个单组件，一般是由多个组件合成的。正因为如此，组件之间肯定是有相互关系的，我们就称这种现象叫组件通信。

比如父组件发生了某项改变，子组件会跟着相应发生变化；反过来，子组件有了某种改变，父组件有时也会随之做出调整。那么这种现象我们称之为双向数据流动。

然而，vue的作者敏锐的认识到，双向数据流带来便捷的同时，也存在着极大的安全隐患。

父组件将变化传递给子组件（父影响子），这是没问题的，在我们日常生活中也是极为普遍的现象（老子教训儿子是天经地义的），然而反过来子影响父的话，这就变得不可理喻了（儿子教训老子？）

子组件修改父组件，增大了组件之间的耦合度。有时开发者根本没有意识到这种修改，这犹如埋下一颗定时炸弹，随着日后项目代码的膨胀，一旦引爆，问题排查难度也会呈指数级的徒增。

为了斩断这种安全隐患，vue提倡的是单向数据流动——也就是只能父影响子，而反过来则不成立。

父传子，我们利用props作为桥梁。下面看一个例子。

首先我将目录调整一下：

其中，helloworld.vue组件，我们设定其为父组件；而children目录下的child.vue，我们设定为其子组件。

Helloworld.vue代码如下：

<!--模板部分-->
<template>
 <div class="container">
  <h1>我是父亲</h1>
<!--绑定父组件的某个变量myMsg-->
  <div>
<!--注意子组件接受变量时，需要变为驼峰命令法sendMessage-->
   <child v-bind:send-message="myMsg"></child>
  </div>

 </div>
</template>
<!--js部分-->
<script>
//引入子组件,需要设定子组件的name为child
import child from './children/child.vue'
export default {
 name:'helloworld',
 data(){
  return {
   myMsg:'hello,my son!'
  };
 },
 components:{child}//局部注册子组件
}
</script>
<!--样式部分-->
<style>
.container{
 background: #ccc;
 color:greenyellow;
}

</style>

大家注意下别把组件和路由的概念搞混了，二者之间一毛钱关系都没有。要使用组件，需做局部或者全局注册。我这里只做局部注册，大家仔细看一下写法。

我们在父组件定义了一个myMsg这个变量，然后通过v-bind绑定到了child组件中。这时，child组件就可以通过props来接收这个变量了。

child.vue代码如下：

<!--模板部分-->
<template>
 <div class="sub-container">
  <h3>我是儿子</h3>

  <div>我从父亲那边接收过来的信息：</div>
  <div>{{sendMessage}}</div>
 </div>
</template>
<!--js部分-->
<script>
//子组件
export default {
 name:'child',//必须设定name，否则无法在父组件import
 props:['sendMessage'],
 data(){
  return {

  };
 }
}
</script>
<!--样式部分-->
<style>
.sub-container{
 background: blue;
 color:red;
}
</style>

一个简单的父子通信案例就完成了，看一下路由router/index.js，代码如下：

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import HelloWorld from '@/components/Helloworld' //我们新定义的组件

Vue.use(Router)

export default new Router({
  routes: [{
      path: '/',
      name: 'Hello',
      component: Hello
    },
    { //新路由
      path: '/helloworld/:id',
      name: 'HelloWorld',
      component: HelloWorld,
    }
  ]
})

运行一下npm run dev，看一下结果：

可以看到，子组件顺利接收到了父组件传来的信息。

那么，到底子组件能否影响父组件呢？我们将以上代码做一下调整。

调整后的Helloworld.vue

<!--模板部分-->
<template>
 <div class="container">
  <h1>我是父亲</h1>

  <input type="text" v-model="myMsg">
  <br>
<!--绑定父组件的某个变量myMsg-->
  <div>
<!--注意子组件接受变量时，需要变为驼峰命令法sendMessage-->
   <child v-bind:send-message="myMsg"></child>
  </div>

 </div>
</template>
<!--js部分-->
<script>
//引入子组件,需要设定子组件的name为child
import child from './children/child.vue'
export default {
 name:'helloworld',
 data(){
  return {
   myMsg:'hello,my son!'
  };
 },
 components:{child}//局部注册子组件
}
</script>
<!--样式部分-->
<style>
.container{
background: #ccc;
color:greenyellow;
}

</style>

调整后的child.vue

<!--模板部分-->
<template>
 <div class="sub-container">
  <h3>我是儿子</h3>

  <div>我从父亲那边接收过来的信息：</div>
  <div>{{sendMessage}}</div>
  <div>是否可以子影响父呢？</div>
  <input type="text" v-model="sendMessage">
 </div>
</template>
<!--js部分-->
<script>
//子组件
export default {
 name:'child',//必须设定name，否则无法在父组件import
 props:['sendMessage'],
 data(){
  return {

  };
 }
}
</script>
<!--样式部分-->
<style>
.sub-container{
 background: blue;
 color:red;
}
</style>

运行一下npm run dev，看一下结果：

可以看出，子组件是无法影响父组件的，这样父组件就成功解耦了。

大家要注意一个问题——传递的数据类型问题。

传递的是值类型肯定没问题，假如是对象或者数组这样的引用类型，变量共用同一内存，所以父子会出现双向影响，这个问题一定要注意。

为了杜绝隐患，提高安全性，我们在子组件将prop接收的类型做一下强制检测，假如传入的数据类型并不是我需要的，可以抛出异常。

Helloworld.vue

<!--模板部分-->
<template>
 <div class="container">
  <h1>我是父亲</h1>

  <input type="text" v-model="myMsg">
<!--<input type="text" v-model="myNum">-->
  <ul v-for="item of myObj">
   <li>{{item.name}}</li>
  </ul>
 <br>
<!--绑定父组件的某个变量myMsg-->
  <div>
<!--注意子组件接受变量时，需要变为驼峰命令法sendMessage-->
   <child :send-message="myMsg" :send-num="myNum" :send-obj="myObj"></child>
  </div>

 </div>
</template>
<!--js部分-->
<script>
//引入子组件,需要设定子组件的name为child
import child from './children/child.vue'
export default {
 name:'helloworld',
 data(){
  return {
   myMsg:'hello,my son!',
   myNum:'123',
   myObj:[{id:1,name:'Tom_Lo'},{id:2,name:'tom'}]
  };
 },
 components:{child}//局部注册子组件
}
</script>
<!--样式部分-->
<style>
.container{
 background: #ccc;
 color:green;
}
</style>

父组件这次传了三个不同类型的信息，分别是字符串、数字和json对象。其中，数字类型我故意写错了，看一下子组件是否会检测出来。

child.vue

<!--模板部分-->
<template>
 <div class="sub-container">
  <h3>我是儿子</h3>

  <div>我从父亲那边接收过来的信息：</div>
  <div>字符串：{{sendMessage}}</div>
  <div>数字：{{sendNum}}</div>
  <div>
   <ul v-for="item of list">
    <li>{{item.name}}</li>
   </ul>
  </div>

 </div>
</template>
<!--js部分-->
<script>
//子组件
export default {
 name:'child',//必须设定name，否则无法在父组件import
 props:{
 sendMessage:{
  type:String,//传入类型必须是字符串
  required:true//必传
 },
 sendNum:{
  type:Number,//传入类型必须是数字
  required:true
 },
//如果是数组或对象
 sendObj:{
  validator:function(val){

   if(Object.prototype.toString.call(val) === '[object Array]' || Object.prototype.toString.call(val) === '[object Object]'){
    return true;
    }
   }
  }
 },//声明验证类型
 data(){
  var parentObj = this.sendObj;//获取父组件传来的json
  var childObj =JSON.parse(JSON.stringify(parentObj));//复制一份，避免污染父组件的数据
  childObj.push({id:3,name:'mike'});//追加一个对象
   return {
    list:childObj
   };
 }
}
</script>
<!--样式部分-->
<style>
.sub-container{
background: blue;
color:red;
}
</style>

大家需要注意下子组件props的验证规则。

那么对于容易引发错误的引用类型，大家应该如何避免呢？

当我们接收过来这个对象数据后，先将其拷贝一份副本，然后用副本做增加修改等操作，这样便不会影响到父组件的数据了。

我们运行一下看看：

看起来验证规则生效了哈~~

那么以上都是同步的情况，那么异步呢？

假设父组件的数据是异步ajax获取的，然后渲染页面。那么此时，子组件如何跟着更新视图呢？

这就得有个监听机制。当子组件监听到父组件的数据到位后，将本地数据更新即可。

vue提供的watch可以达到此目的，我们看一下例子。

Helloworld.vue

<!--模板部分-->
<template>
 <div class="container">
  <h1>我是父亲</h1>
  <input type="text" v-model="myMsg">
<!--<input type="text" v-model="myNum">-->
  <ul v-for="item of myObj">
   <li>{{item.name}}</li>
  </ul>
 <br>
<!--绑定父组件的某个变量myMsg-->
  <div>
<!--注意子组件接受变量时，需要变为驼峰命令法sendMessage-->
   <child :send-message="myMsg" :send-num="myNum" :send-obj="myObj"></child>
  </div>

 </div>
</template>
<!--js部分-->
<script>
//引入子组件,需要设定子组件的name为child
import child from './children/child.vue'
export default {
 name:'helloworld',
 data(){
//初始化obj
  var obj = {
   myMsg:'hello,my son!',
   myNum:123,
   myObj:[]
  };
//延时返回myObj，模拟ajax的延时情况
  setTimeout(function(){
   obj['myObj'] = [{id:1,name:'jack'},{id:2,name:'tom'}];

  },2000);
  return obj;
 },
 components:{child}//局部注册子组件
}
</script>
<!--样式部分-->
<style>
.container{
 background: #ccc;
 color:green;
}
</style>

child.vue

<!--模板部分-->
<template>
 <div class="sub-container">
  <h3>我是儿子</h3>

  <div>我从父亲那边接收过来的信息：</div>
  <div>字符串：{{sendMessage}}</div>
  <div>数字：{{sendNum}}</div>
  <div>
   <ul v-for="item of list">
     <li>{{item.name}}</li>
   </ul>
  </div>

 </div>
</template>
<!--js部分-->
<script>
//子组件
export default {
 name:'child',//必须设定name，否则无法在父组件import
 props:{
  sendMessage:{
   type:String,//传入类型必须是字符串
   required:true//必传
  },
  sendNum:{
   type:Number,//传入类型必须是数字
   required:true
  },
//如果是数组或对象
  sendObj:{
   validator:function(val){

    if(Object.prototype.toString.call(val) === '[object Array]' || Object.prototype.toString.call(val) === '[object Object]'){
     return true;
    }
   }
  }
 },//声明验证类型
 data(){

   return {
    list:null
   };
 },
 watch:{//监控父组件sendObj的变化
  sendObj(newval,oldval){

   if(newval !== oldval){

    var newobj =JSON.parse(JSON.stringify(newval));//复制一份，避免污染父组件的数据
    newobj.push({id:3,name:'mike'});//追加一个对象
    this.list = newobj;//将新值赋予data的list
   }

  }
 }
}
</script>
<!--样式部分-->
<style>
.sub-container{
 background: blue;
 color:red;
}
</style>