总结vue中组件相互传值的几种方式

子向父方式1:通过props,如例子中子组件test1.vue向父组件App.vue传值

  App.vue代码

<template>
  <div id="app">
    <test1 :parfn="parfn"></test1>
  </div>
</template>

<script>
import test1 from ‘@/components/test1.vue‘
export default {
  name: ‘App‘,
  data () {
    return {
      msg: ‘parent‘
    }
  },
  components: {test1},
  methods: {
    parfn: function (a) {
      alert(a)
    }
  }
}
</script>

  test1.vue代码

<template>
    <div>i am test1</div>
</template>

<script>
export default {
  data () {
    return {
      msg: ‘test1‘
    }
  },
  props: {
    parfn: {
      type: Function
    }
  },
  created: function () {
    this.parfn(this.msg)
  }
}
</script>

效果图

子向父方式2:通过$parent

  App.vue代码:  

<template>
  <div id="app">
    <test1></test1>
  </div>
</template>

<script>
import test1 from ‘@/components/test1.vue‘
export default {
  name: ‘App‘,
  data () {
    return {
      msg: ‘parent‘
    }
  },
  components: {test1},
  methods: {
    parfn: function (a) {
      alert(a)
    }
  }
}
</script>

  test1.vue代码: 

<template>
    <div>i am test1</div>
</template>

<script>
export default {
  data () {
    return {
      msg: ‘test1‘
    }
  },
  created: function () {
    this.$parent.parfn(this.msg)
  }
}
</script>

效果图:

子向父方式3:通过emit

  App.vue代码

<template>
  <div id="app">
    <test1 @myfn="parfn"></test1>
  </div>
</template>

<script>
import test1 from ‘@/components/test1.vue‘
export default {
  name: ‘App‘,
  data () {
    return {
      msg: ‘parent‘
    }
  },
  components: {test1},
  methods: {
    parfn: function (a) {
      alert(a)
    }
  }
}
</script>

  test1.vue代码: 

<template>
    <div>i am test1</div>
</template>

<script>
export default {
  data () {
    return {
      msg: ‘test1‘
    }
  },
  mounted: function () {
    this.$emit(‘myfn‘, this.msg)
  }
}
</script>

效果图:

父向子传值方式1:通过props

  App.vue代码: 

<template>
  <div id="app">
    <test1 :msg="msg"></test1>
  </div>
</template>

<script>
import test1 from ‘@/components/test1.vue‘
export default {
  name: ‘App‘,
  data () {
    return {
      msg: ‘parent‘
    }
  },
  components: {test1}
}
</script>

  test1.vue代码:

<template>
    <div>i am test1</div>
</template>

<script>
export default {
  props: [‘msg‘],
  created: function () {
    alert(this.msg)
  }
}
</script>

  效果图:

  

父向子方式2:通过$children

  App.vue代码:  

<template>
  <div id="app">
    <test1></test1>
  </div>
</template>

<script>
import test1 from ‘@/components/test1.vue‘
export default {
  name: ‘App‘,
  data () {
    return {
      msg: ‘parent‘
    }
  },
  mounted: function () {
    this.$children[0].childfn(this.msg)
  },
  components: {test1}
}

  test1.vue代码  

<template>
    <div>i am test1</div>
</template>

<script>
export default {
  methods: {
    childfn: function (a) {
      alert(a)
    }
  }
}
</script>

  效果图:

  

父向子方式3:通过ref

  App.vue代码: 

<template>
  <div id="app">
    <test1 ref="mychild"></test1>
  </div>
</template>

<script>
import test1 from ‘@/components/test1.vue‘
export default {
  name: ‘App‘,
  data () {
    return {
      msg: ‘parent‘
    }
  },
  mounted: function () {
    this.$refs.mychild.childfn(this.msg)
  },
  components: {test1}
}
</script>

  test1.vue代码: 

<template>
    <div>i am test1</div>
</template>

<script>
export default {
  methods: {
    childfn: function (a) {
      alert(a)
    }
  }
}
</script>

  效果图:

  

原文地址:https://www.cnblogs.com/hesj/p/10568869.html

时间: 2024-10-31 04:15:42

总结vue中组件相互传值的几种方式的相关文章

React 中组件间通信的几种方式

在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 非嵌套组件间通信 跨级组件之间通信 1.父组件向子组件通信父组件通过向子组件传递 props,子组件得到 props 后进行相应的处理.演示代码:父组件 parent.js: import React,{ Component } from "react"; export default class App extends Component{

在Vue中输入框自动获取焦点的三种方式

原生JS操作DOM使用mounted钩子函数,它表示页面一加载进来就执行函数里面的内容(和window.onload类似)1//html部分 编号:<input type="text" v-model='newId' id='inputId'>//vue对象var vm = new Vue({ el: '#app', data: { newId: '', }, // 注意:mounted钩子函数的名字不能随便取,而且它不能写在methods属性. mounted () {

vue父子组件之间传值

vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种vue-cli搭建的同理 父组件通过 v-bind:属性名(自定义的) = "要传递的数据" 子组件通过 props:["属性名"]  这个属性名就是父组件传递过来的数据信息 <div id="app"> <mod :abc=&qu

vue父子组件的传值总结

久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. 情况一:父组件给子组件传值方法,使用props 父页面:parent.vue 1 <template> 2 <div class="sidebar_contianer"> 3 <sidebar-item :routerData="transmitDa

github项目解析(八)--&gt;Activity启动过程中获取组件宽高的三种方式

转载请标明出处:一片枫叶的专栏 上一个github小项目中我们介绍了防止按钮重复点击的小框架,其实现的核心逻辑是重写OnClickListener的onClick方法,添加防止重复点击的逻辑,即为第二次点击与第一次点击的时间间隔添加阙值,若第二次点击的时间间隔与第一次点击的时间间隔小于阙值,则此次点击无效,再次基础上我们又封装了点击组件验证网络Listener,点击组件验证是否登录Listener等,具体可参考:github项目解析(七)–>防止按钮重复点击 本文中我将介绍一下android中A

【转】【ASP.NET MVC系列】浅谈ASP.NET 页面之间传值的几种方式

ASP.NET MVC系列文章 原文地址:https://www.cnblogs.com/wangjiming/p/6275854.html [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作篇)(下) [04]浅谈ASP.NET框架 [05]浅谈ASP.NET MVC运行过程 [06]浅谈ASP.NET MVC 控制器 [07]浅谈ASP.NET MVC 路由 [08]浅谈AS

【REACT NATIVE 系列教程之十三】利用LISTVIEW与TEXTINPUT制作聊天/对话框&&获取组件实例常用的两种方式

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2346.html 本篇Himi来利用ListView和TextInput这两种组件实现对话.聊天框. 首先需要准备的有几点:(组件的学习就不赘述了,简单且官方有文档) 1. 学习下 ListView: 官方示例:http://reactnative.cn/docs/0.27/tutorial.html#content

页面传值的几种方式

1.使用QueryString 使用QuerySting在页面间传递值已经是一种很老的机制了,这种方法的主要优点是实现起来非常简单,然而它的缺点是传递的值是会显示在浏览器的地址栏上的(不安全),同时又不能传递对象,但是在传递的值少而安全性要求不高的情况下,这个方法还是一个不错的方案.使用这种方法的步骤如下: 1,使用控件创建web表单(form) 2,创建可以返回表单的按钮和链接按钮 3,在按钮或链接按钮的单击事件里创建一个保存URL的字符变量 4,在保存的URL里添加QueryString参数

EF5(7) 后台使用SelectListItem传值给前台显示Select下拉框;mvc后台Action接收浏览器传值的4种方式; 后台Action向前台View视图传递数据的四种方式

一:后台使用SelectListItem 传值给前台显示Select下拉框 我们先来看数据库的订单表,里面有3条订单,他们的用户id对应了 UserInfo用户表的数据,现在我们要做的是添加一个Order控制器,显示订单列表,并且在修改订单的时候,把用户的id 用 select 下拉框显示出来,并且可以提交修改数据   1.1 我们通过比较原始的方法,来把数据 传递到前台后,前台使用  循环来显示 select 并且显示是哪个元素被选中 我们在前台的cshtml中,使用 @model 命令 指定