组件是Vue知识体系中最重要的一部分之一,父子组件由于作用域的不同,无法直接对对方的数据进行操作。它们之间的数据传递都是通过中间介质进行的,父组件给子组件传值是通过props属性,而子组件给父组件传值是通过自定义事件。

1.父组件向子组件传值

     <div id="app">
<parent></parent>
</div> <template id="parent">
  <div>
    <div style="border:1px solid red;width: 300px;">
      <h1>父组件</h1>
      <p>{{parentMsg}}</p>
    </div>
    <child :get-parent="parentMsg"></child>
  </div>
</template> <template id="child">
  <div>
    <h1>子组件</h1>
    <p>{{childMsg}}</p>
<button @click="printParentMsg()">父组件信息</button>
  </div>
</template> <script> var child={
    data(){
      return {
        childMsg:"我是子组件数据"
      }
    },
    template:"#child",
props: ['getParent'],
methods: {
printParentMsg(){
alert('父组件信息:' + this.getParent);
}
}
  };   var parent={     data(){
      return {
        parentMsg:"我是父组件的数据"
      }
    },     components:{
      'child':child
    }, template: '#parent'
}   new Vue({
    el:"#app",
    components:{
      'parent':parent
    }
  }); </script>

具体方法:

1.子组件在props中创建一个属性,用来接收父组件传来的值

2.父组件中注册子组件

3.在父组件模板中的子组件标签添加对应于子组件props中的属性

4.把需要传递的值赋给上一步子组件标签创建的属性(这里要注意的是props中的属性用驼峰命名法,标签中的属性用横杠命名法)

2.子组件向父组件传值

     <div id="app">
<parent></parent>
</div> <template id="parent">
  <div>
    <div style="border:1px solid red;width: 300px;">
      <h1>父组件</h1>
      <p>{{parentMsg}}</p>
    </div>
    <child v-on:receive-msg="handleMsg"></child>
  </div>
</template> <template id="child">
  <div>
    <h1>子组件</h1>
    <p>{{childMsg}}</p>
<button @click="sendToParent">传递信息</button>
  </div>
</template> <script> var child={
    data(){
      return {
        childMsg:"我是子组件数据"
      }
    },
    template:"#child",
props: ['getParent'],
methods: {
sendToParent(){
console.log('sendToparent')
this.$emit("receive-msg", "已经收到子组件传来的消息");
}
}
  };   var parent={     data(){
      return {
        parentMsg:"我是父组件的数据"
      }
    },     components:{
      'child':child
    }, template: '#parent', methods: {
handleMsg: function(msg){
console.log('handleMsg')
alert(msg);
}
}
}   new Vue({
    el:"#app",
    components:{
      'parent':parent
    }
  }); </script>

具体方法:

1.子组件在某种条件下触发一个自定义事件

2.该自定义事件需要挂载在父组件的子组件标签上,让父组件可以监听到这个自定义事件

3.将需要传的值放在$emit方法的第二个参数上,该值将作为实参传递给响应自定义事件的方法

(注意!这里有个小坑:自定义事件貌似不支持驼峰命名法,改用横杠命名即可,否则会接收不到值)

Vue父子组件之间的相互通信的更多相关文章

  1. VUE 自定义组件之间的相互通信

    一.自定义组件 1.全局自定义组件 我们在var vm = new Vue({});的上面并列写上Vue.component('自定义组件名',{组件对象});来完成全局自定义组件的声明.示例代码如下 ...

  2. 【转】vue父子组件之间的通信

    vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...

  3. VUE 父子组件之间通信传值 props和 $emit

    1.父组件传值给子组件 $props,子组件传值给父组件 $emit 父组件          <div id="app" >               <tr ...

  4. 浅谈vue父子组件之间的传值

    前言:本章主要说下父子组件的传值,为商品列表组件之间的传值做一个基础预热.Github:https://github.com/Ewall1106/mall(请选择分支chapter23) 1.父组件向 ...

  5. vue父子组件之间传值

    vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...

  6. vue父子组件之间互相获取data值&调用方法(非props)

    vue 子组件调用父组件方法&数据 vue有$parent这么一个属性,在子组件中就能拿到父组件的数据 this.$parent.xxx 就能调用父组件的方法 this.$parent.xxx ...

  7. vue父子组件之间的通信

    利用props在子组件接受父组件传过来的值1.父组件parentComp.vue <template> <childComp :fromParentToChild="fro ...

  8. Vue父子组件之间通信

    1.父 -> 子.通过props //father.vue <template> <div id="father"> <div><l ...

  9. vue父子组件之间相互传值

    1. 子组件使用父组件方法,并向父组件传值 子组件代码 <template> <div class="menu"> <div class=" ...

随机推荐

  1. Git错误merge怎么办?

    Git怎样撤销一次分支的合并Merge git merge了错误分支,如何优雅的回退到merge前的状态? 版本回退

  2. Kafka-python 客户端导致的 cpu 使用过高,且无法消费消息的问题

    今天遇到一个情况使用了 Kafka-python 1.3.3 来操作读取 broker 1.0.1 版本的 kafka.出现了 rebalance 之后分配到了客户端,但是 cpu 利用率很高且无法消 ...

  3. Activiti6作业执行器Job Executor配置(学习笔记)

    内容概况: 异步执行配置相关: asyncExecutorActivate:这个属性是激活作业执行器,它的默认参数是false,只有设为true,activiti启动的时候才会开启线程池去扫描定时操作 ...

  4. python爬虫爬取赶集网数据

    一.创建项目 scrapy startproject putu 二.创建spider文件 scrapy genspider  patubole patubole.com   三.利用chrome浏览器 ...

  5. monkey事件简介

    操作事件简介 Monkey所执行的随机事件流中包含11大事件,分别是触摸事件.手势事件.二指缩放事件.轨迹事件.屏幕旋转事件.基本导航事件.主要导航事件.系统按键事件.启动Activity事件.键盘事 ...

  6. kNN总结

    1,kNN不训练模型 2,主要是通过计算 3,计算点到每个近邻的距离,按照距离递增排序,选取距离最近的k个邻居,在k个邻居中出现频率最大的就是它的分类结果 4,计算距离有不同的距离公式,可以看每种公式 ...

  7. Spring MVC 使用介绍(八)—— 类型转换

    一.概述 spring类型转换有两种方式: PropertyEditor:可实现String<--->Object 之间相互转换 Converter:可实现任意类型的相互转换 类型转换的过 ...

  8. P2495 [SDOI2011]消耗战 lca倍增+虚树+树形dp

    题目:给出n个点的树  q次询问  问切断 k个点(不和1号点联通)的最小代价是多少 思路:树形dp  sum[i]表示切断i的子树中需要切断的点的最小代价是多少 mi[i]表示1--i中的最小边权 ...

  9. Magento 2 Plugin - Interceptor - Magento 2插件 - 拦截器-插件开发

    Magento 2 Plugin - Interceptor - Magento 2插件 - 拦截器 Magento 2 Plugin is a technical plugin for your b ...

  10. 【BZOJ5503】[GXOI/GZOI2019]宝牌一大堆(动态规划)

    [BZOJ5503][GXOI/GZOI2019]宝牌一大堆(动态规划) 题面 BZOJ 洛谷 题解 首先特殊牌型直接特判. 然后剩下的部分可以直接\(dp\),直接把所有可以存的全部带进去大力\(d ...