在vue中,我们可以把一个页面各个部分单独封装起来,做成各种小组件,然后加载,这样的好处是代码维护起来比较容易,重复的代码多处调用!

在一个vue项目中,单文件组件以.vue形式文件命名

每个组件之间,都能建立起关联,然后最后通过webpack打包编译就好

下面有两个组件a.vue(子组件)和b.vue(父组件)

重点:props和emit都是在子组件中定义的哦~~~

<template>
<div>
<h5>我是a组件</h5>
<button @click="et">点我</button>
<h2>{{number}}</h2>
</div>
</template>
<script>
import Vue from 'vue';//引入vue.js文件
export default {
//props 接受父组件的数据,number # 父--> 子 :在子组件中通过props接收父组件,在父组件中通过v-bind(:)向props发送数据。
props:['number'],
data () {
return{
hello:"你好,我是a组件"
}
},
methods: {
et() { #子-->父:通过et触发this.$emit, 给父组件的my-dd属性(父组件以及监听这个my-dd属性)发送this.hello的内容
this.$emit('my-dd',this.hello);
}
}
}
</script>

$emit命令简介

官方解释大致的意思是监听回调

下面这张图,充分说明$emit到底在组件通讯中,做啥的!

从这种图看出

子集向父集传输,用emit

父集向子集传输,用props

我们在按钮里面有个点击事件<button @click="et">点我</button>

在我们vue里面,基本所有的函数处理都放在一个函数处理器里面,这里我们可以连接上下文

这个东西就是vue内置的methods

在methods里面我们有一个定义的函数et

et() {
  this.$emit('my-dd',this.hello);
}

我们监听了一个叫做my-dd的东西,我们先不要管他是什么,然后后面,跟了一个参数this.hello

下面我们来看组件b.vue(也就是我们定义的a.vue的父组件)

<template>
<div>
<h5>b组件</h5>
<!-- 自定义属性大小写不敏感,通过下划线定义 -->
<c-a :number="datas" @my-dd="dd"></c-a> //注意这块的datas不是字符串,必须是data中定义的属性,即使要传字符串"datas",也得在下面定义 datas: "datas"
<!-- 通过is标签,把组件放到p标签里面 -->
<!-- <p :is="compontder"></p> -->
</div>
</template>
<script>
import Vue from 'vue';
import CA from "./a";
export default {
data () {
return{
hello:"你好,我是组件b",
compontder:"c-a",
datas:[
{name:"父组件1"},
{name:"父组件2"},
{name:"父组件3"}
]
}
},
methods: {
dd(s) {
console.log(s);
}
},
components:{
CA
},
}
</script>

下面我们可以看到b.vue里面我们定义了一个属性@my-dd,这里就是我们子组件a.vue里面监听的东西了

this.$emit('my-dd',this.hello);

现在知道了吧。子组件监听的是父组件的属性

父组件my-dd里面绑定的是一个dd的函数,并且打印参数console.log(s)

里面就是打印了子组件的this.hello

然后我们来看一下组件引入,

import CA from "./a";

我们需要在一个在vue内置的一个components注册

components:{
  CA //代表注册了CA组件,可以在页面用这个组件了
}

<c-a :number="datas" @my-dd="dd"></c-a>

这就是引用子组件a.vue了

并且向子组件传递了一个属性number="datas"(通过v-bind传递的)

也就是我们的数据datas

我们在子组件中接收到了

props:['number']接收

在这里,我们知道了子组件,父组件之间的通讯了

原文:https://www.cnblogs.com/null11/p/7016153.html

其他参考:https://blog.csdn.net/yangping227/article/details/77853580

以上是mounted之后通过手工的方式父子之间通信

如果是在页面初始化的时候自动进行父子之间通信(具体是父组件向子组件传递数据),这个时候要传递的数据必须在created的时候就准备好,如果是在mounted的时候准备数据,子组件是收不到父组件的数据的

原因:父子组件通信的时间是在created之后,mounted之前!!!

(备注:这个是错误的!!!!!!!!!!!!!!)

正确思路:如下图的过程只是渲染,父子组件通信的时间是,当父组件通过 冒号绑定的数据发生变化的时候就会给子组件通信,即使已经mounted了,只要父组件中冒号绑定的属性发生了变化,这个变化就会实时的传递给子组件,在子组件中可以通过 监听watch的机制,来实现当数据变化的时候做对应的逻辑(这个watch可以当做父子组件通信的钩子函数使用!!!)

vue单文件组件互相通讯的更多相关文章

  1. 【原】vue单文件组件互相通讯

    在vue中,我们可以把一个页面各个部分单独封装起来,做成各种小组件,然后加载,这样的好处是代码维护起来比较容易,重复的代码多处调用! 在一个vue项目中,单文件组件以.vue形式文件命名 每个组件之间 ...

  2. webpack入坑之旅(五)加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  3. Vue单文件组件

    前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...

  4. vue 单文件组件

    在很多vue项目中,我们使用vue.component来定义全局组件,紧接着用new Vue({el:'#container'})在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好 ...

  5. webpack打包vue单文件组件

    一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...

  6. ts-loader如何与vue单文件组件衔接

    .ts-loader是如何与vue单文件组件衔接作用的 https://github.com/microsoft/TypeScript-Vue-Starter https://www.npmjs.co ...

  7. 基于VSCode的vue单文件组件模板设置---一次设置,可爽终生

    第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 & ...

  8. vue 单文件组件最佳实践

    vue 单文件组件最佳实践 生命周期 template <template> <section> <h1>vue single file components te ...

  9. vue单文件组件的构建

    在很多Vue项目中,我们使用 Vue.component 来定义全局组件,这种方式在很多中小规模的项目中运作的很好. 但当在更复杂的项目中,就有了很大的弊端. 我们就可以用文件扩展名 .vue的单文件 ...

随机推荐

  1. 操作表单 -------JavaScrip

    本文摘要:http://www.liaoxuefeng.com/ HTML表单的输入控件主要有以下几种: 文本框,对应的<input type="text">,用于输入 ...

  2. UNC路径格式

    \\192.168.3.66\c$  访问本地网内计算机

  3. 【SQL】连接 —— 内连接、外连接、左连接、右连接、交叉连接

    连接 · 内连接 · 外连接 · 左连接 · 右连接 · 全连接 · 交叉连接 · 匹配符号(+)  连接  根据表之间的关系,呈现跨表查询的结果.     外连接     内连接 左连接 右连接 全 ...

  4. 自动布局之-NSLayoutConstraint

    AutoLayout概念是苹果自iOS6开始引入的概念. 目前为止,实现自动布局技术选型方面也可以使用xib和storyboard.在开发过程中通常登录.注册等变动可能性较小的视图,我会采用xib开发 ...

  5. 高性能可扩展MySQL数据库设计及架构优化 电商项目(慕课)第3章 MySQL执行计划(explain)分析

    ID:相同就从上而下,不同数字越大越优先

  6. jquery的ajax请求

    加载页面内容,如果不加选择器,会加载整个页面内容 加选择器会获取选择器内容 例如: <script> //可以获取json格式的文件 $.ajax({ type:"get&quo ...

  7. jsp页面:一个form,不同请求提交form

    需求:一个表单中有一个请求 action="url"发送数据地址: 在表单外有一个请求,请求form表单提交的数据 我们用js来写:通过每次请求传不同的action=url; 例如 ...

  8. 在Linux下搜索文件

    在Linux下搜索文件============================= 1,which 查找可执行文件的绝对路径 [root@aminglinux ~]# which cat /bin/ca ...

  9. 2018年湘潭大学程序设计竞赛 E 吃货

    题目描述 作为一个标准的吃货,mostshy又打算去联建商业街觅食了.混迹于商业街已久,mostshy已经知道了商业街的所有美食与其价格,而且他给每种美食都赋予了一个美味度,美味度越高表示他越喜爱这种 ...

  10. SHIWEITI

    //Wannafly挑战赛19(牛客网) //A 队列Q #include <iostream> #include <cstdio> #include <cstring& ...