抱歉,你查看的文章不存在

Vue2.0父子组件间通信

vue2.0

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 从根本上采用最小成本、渐进增量的设计。Vue 的核心库只专注于视图层,并且很容易与其他第三方库或现有项目集成。另一方面,当与单文件组件Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供有力驱动。

运行环境搭建

Vue引入方式一般有三种: 第一种CDN引入

<script src="[https://cdn.jsdelivr.net/npm/vue](https://cdn.jsdelivr.net/npm/vue)"></script>

第二种使用 NPM 安装

$ npm install vue//安装最新稳定版

第三种搭建脚手架CLI 所谓脚手架是通过webpack搭建的开发环境,用于快速搭建大型单页面应用程序。能够为现代前端开发的工作流程,带来持久强力的基础架构。只需几分钟,就可以建立并运行一个带有“热重载、保存时代码检查以及可直接用于生产环境的构建配置”的项目。 首先必须先安装node.js,Node.js 在 0.6.3 版本开始内建npm,所以安装好node.js后,npm也就装好。然后在通过git bash 操作以下命令行:

$ node -v//检查是否已经装好了node
$ npm -v//检查是否已经装好了npm
$ npm install --global vue-cli //安装 vue-cli
$ vue init webpack project//进入目标文件夹创建一个新项目
$ cd project//进入新项目
$ npm install//安装package.json中依赖的node_modules
$ npm run dev//运行该项目

对于大陆用户,建议将npm的注册表源设置为国内的镜像,可以大幅提升安装速度。推荐使用这种安装脚手架。

npm config set registry https://registry.npm.taobao.org//配置淘宝镜像
npm config get registry//验证是否成功
npm install -g cnpm --registry=https://registry.npm.taobao.org//安装cnpm
cnpm install -g vue-cli//cnpm安装脚手架
vue init webpack my-project
cd my-project
cnpm install
cnpm run dev

最后打开http://localhost:8080,就出现下面的页面,标志着脚手架搭建完成了。

介绍SRC文件流程及根组件App

脚手架搭建完成后,project里面各个文件夹及文件,如下图:

脚手架各个文件和文件夹

src文件流程介绍

index.html(入口文件)=>main.js=>App.vue(根组件),根组件中模板内容就直接插入到入口文件中#app处,然后再将页面呈现出来。

根组件App介绍

主要由三部分组成,分别为模板(html结构),行为(处理逻辑)和样式(解决样式)

vue组件嵌套

vue组件嵌套是指写好的子组件如何与根组件取得关联,通常可以分为组件全局定义和组件局部定义,后者比较常见。

1.组件全局定义

一般以下两个步骤:

  1. main.js引入子组件
  2. App.vue组件中template调用
//main.js
import Vue from 'vue'
import App from './App'
import Users from "./components/Users";//引入子组件Users
Vue.config.productionTip = false
Vue.component("users",Users);//自定义名字便于App.vue组件调用,后者为组件名
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})
//App.vue组件
<template>
  <div id="app">
   <users></users>//在这里调用,自定义名字是小写的
  </div>
</template>
2.组件局部定义

一般以下三个步骤:

  1. import引入子组件
  2. export default注册子组件
  3. template模板中加入子组件

根组件App

父组件向子组件传值

接下来我们通过一个例子,说明父组件如何向子组件传递值:在子组件Users.vue中如何获取父组件App.vue中的数据 users:["Henry","Bucky","Emily"]

1.创建子组件,在src/components/文件夹下新建一个Users.vue子组件
2.在App.vue中注册Users.vue组件,并在template中加入users标签
//App.vue父组件
<template>
  <div id="app">
    <users v-bind:users="users"></users>//前者自定义名称便于子组件调用,后者要传递数据名
  </div>
</template>
<script>
import Users from "./components/Users"
export default {
  name: 'App',
  data(){
    return{
      users:["Henry","Bucky","Emily"]
    }
  },
  components:{
    "users":Users
  }
}
3.Users.vue的中创建props,然后创建一个users的属性
//users子组件
<template>
  <div class="hello">
    <ul>
      <li v-for="user in users">{{user}}</li>//遍历传递过来的值,然后呈现到页面
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props:{
    users:{           //这个就是父组件中子标签自定义名字
      type:Array,
      required:true
    }
  }
}
</script>

子组件向父组件传值(通过事件形式)

接下来我们通过一个例子,说明子组件如何向父组件传递值: 当我们点击“Vue.js Demo”后,子组件向父组件传递值,文字由原来的“传递的是一个值”变成“子向父组件传值”,实现子组件向父组件值的传递。

子组件向父组件传值之前

1.在子组件(header组件)中文字部分绑定一个点击事件
<template>
  <header>
    <h1 @click="changeTitle">{{title}}</h1>//绑定一个点击事件
  </header>
</template>
<script>
2.子组件中响应该点击事件的函数中使用$emit来触发一个自定义事件,并传递一个参数
<script>
export default {
  name: 'app-header',
  data() {
    return {
      title:"Vue.js Demo"
    }
  },
  methods:{
    changeTitle() {
      this.$emit("titleChanged","子向父组件传值");//自定义事件  传递值“子向父组件传值”
    }
  }
}
</script>
3.在父组件(App根组件)中的子标签中监听该自定义事件并添加一个响应该事件的处理方法
<template>
  <div id="app">
    <app-header v-on:titleChanged="updateTitle($event)" ></app-header>//与子组件titleChanged自定义事件保持一致,updateTitle($event)接受传递过来的文字
    <h2>{{title}}</h2>
  </div>
</template>
<script>
import Header from "./components/Header"
export default {
  name: 'App',
  data(){
    return{
      title:"传递的是一个值"
    }
  },
  methods:{
    updateTitle(e){   //声明这个函数
      this.title = e;
    }
  },
  components:{
   "app-header":Header,
  }
}
</script>

总结

在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是都有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

编辑于

前端学习心得

2 篇文章25 人订阅

相关文章

来自专栏更流畅、简洁的软件开发方式

页面回发后,让页面自动滚动到指定位置的一种简单的方法

最近某客户做实施,顺便完善一下程序。突然找到了一个老问题的解决方法。 就是当用户按一个按钮后,希望回发后的页面滚到一个指定的位置,而不是页面的开头部分。以...

3377
来自专栏美丽应用

PPIICC:简洁易用的长截图工具

1192
来自专栏从零开始学自动化测试

Selenium+python自动化83-chrome手机wap模式

一、前言 这里是群里(QQ群:226296743)风神出60大洋悬赏的问题,学会这篇就是赚了60大洋了! 我的环境: - chrome 62 - chrome...

4444
来自专栏Golang语言社区

go channel 通信通道

go中最重要的一种通信通道就是channel 1.给一个 nil channel 发送数据,造成永远阻塞 2.从一个 nil channel 接收数据,造成...

3053
来自专栏CDA数据分析师

50个逆天功能,看完变Excel绝顶高手(全都是动图!)

Excel的50个逆天功能,动画教程珍藏版。 1、自动筛选 ? 2、在Excel中字符替换 ? 3、在Excel中冻结行列标题 ? 4、在Excel中为导入外部...

2696
来自专栏极乐技术社区

Belinda的小程序踩坑记(一)

微信小程序出来已有段时间,虽还在内测阶段。利用空闲时间,我把蜂贷微信项目部分迁移到小程序上。 目录结构 小程序的主体由三个文件组成,这三个文件要放在项目的根目录...

2207
来自专栏DeveWork

WordPress自带TinyMCE编辑器相关功能增强

WordPress 默认的那个编辑器叫做TinyMCE。TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Fi...

3365
来自专栏web前端

smartClient 2--可视化组件

三、资源:https://www.smartclient.com/smartclient/showcase/?id=formLayoutFilling&skin...

1210
来自专栏DeveWork

阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页

最近为了更好地接触移动Web 开发狠心购买了一台ipad mini(之前一直都是借同学的,借多了就不好意思了)。拿来调试DeveMobile 与EaseMobi...

2.8K10
来自专栏LeoXu的博客

[翻译]VelocityLayoutServlet (VLS) 综观

这一个基本的VelocityViewServlet的一个扩展。它为基于Velocity Tools 的工程项目提供了一个简单的布局控制和定制的错误显示屏幕。Ve...

701

扫码关注云+社区

领取腾讯云代金券