TOP

【前端小小白的学习之路】vue学习记录⑤(组件通信-父与子)(一)
2017-10-10 12:35:51 】 浏览:10709
Tags:前端 小白 习之 vue 学习 记录 组件 通信

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

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

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

 

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

然而,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>
  
		
【前端小小白的学习之路】vue学习记录⑤(组件通信-父与子)(一) https://www.cppentry.com/bencandy.php?fid=107&id=131072

首页 上一页 1 2 3 4 下一页 尾页 1/4/4
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇[js高手之路] es6系列教程 - Map.. 下一篇angular之$watch方法详解