基于Vue中的父子传值问题解决

主题是Vue中几种常见的传值方法。。。先写个父子传值吧

vue-cli构建项目目录，噜啦啦，这个就不用说了吧。

接着创建父子组件，父组件Father.vue，子组件Son.vue(随意起名，开心就好)，然后在父组件中引入子组件，创建一个父组件的路由。车门已经焊死了，请继续往下看

1.父传子

Father.vue(用v-bind(简写 : ) 将父组件传的值绑定到子组件上)

<template>
 <div>
  我是爸爸：{{message}}
  <hr>
  <Son :toSonData="toSonData"></Son>
 </div>
</template>

<script>
import Son from "./Son.vue";
export default {
 data() {
 return {
  message : "儿子你好",
  toSonData: "大嘴巴子"//给子组件的值
 };
 },

 components: {
 Son
 }
};
</script>
<style lang='scss' scoped>
</style>

Son.vue（在子组件中用props方法接收父组件传来的值，两种方法，具体用哪种看个人喜好，推荐第二种）

<template>
 <div>
 我是儿子：{{message}}
 <br>
 爸爸给我的礼物：{{toSonData}}
 </div>
</template>

<script>
export default {
 // props:["toSonData"],//第一种方式
 props:{//第二种方式
 toSonData:{
  type:String,
  default:function(){
  return ""
  }
 }
 },
 data () {
 return {
  message : "爸爸你好"
 };
 },
}

</script>
<style lang='scss' scoped>
</style>

效果图：

2.子传父

Son.vue(在子组件中创建一个按钮，定义一个点击事件，点击事件里用this.$emit方法触发一个自定义事件，并传递一个参数)

<template>
 <div>
 我是儿子：{{message}}
 <br>
 爸爸给我的礼物：{{toSonData}}
 <br>
 <button @click="toFatherData">给爸爸传值</button>
 </div>
</template>

<script>
export default {
 // props:["toSonData"],//第一种方式
 props:{//第二种方式
 toSonData:{
  type:String,
  default:function(){
  return ""
  }
 }
 },
 data () {
 return {
  message : "爸爸你好"
 };
 },
 methods:{
 toFatherData(){
  this.$emit("toFatherData","给爸爸的爱")
 }
 }
}

</script>
<style lang='scss' scoped>
</style>

Father.vue(在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法，将接收到的值赋给data中的sendSonMessage)

<template>
 <div>
  我是爸爸：{{message}}
  <br>
  儿子传来的值:{{sendSonMessage}}
  <hr>
  <Son :toSonData="toSonData" @toFatherData="sendSonData"></Son>
 </div>
</template>

<script>
import Son from "./Son.vue";
export default {
 data() {
 return {
  message : "儿子你好",
  toSonData: "大嘴巴子",//给子组件的值
  sendSonMessage: ""
 };
 },

 components: {
 Son
 },
 methods:{
 sendSonData(data){
  this.sendSonMessage=data;
 }
 }
};
</script>
<style lang='scss' scoped>
</style>

效果图：

补充知识：在vue中的for循环，我经常用这两种方法

1、

for(let item of response.data.result) {

用item操作每一条数据。
}

item：定义的每一条的变量

response.data.result：要循环的数组

2、

response.data.result.forEach((item, index) => {

用item操作每一条数据。
}）

response.data.result：要循环的数组

index：索引

以上这篇基于Vue中的父子传值问题解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue中的父子传值双向绑定及数据更新问题

    详解vue中的父子传值双向绑定及数据更新问题

    在进行父子组件传值时,用到子组件直接控制父组件中的变量值以及在vue中直接更改对象或者数组的值,视图未发生变化的解决办法,当时完成项目时,一直未找到原因,修改了好久. 1.父子组件传值双向绑定 在传递给子组件中的变量上使用.sync修饰符,就能够实现父子传值的双向绑定 <!-- 父组件 --> <template> <div class="audioCate"> <child :show.sync="showModel" @

  • vue 进阶之实现父子组件间的传值

    本章我们将深入了解一下组件,并实现父子组件间的传值. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head&g

  • vue中父子组件传值,解决钩子函数mounted只运行一次的操作

    因为mounted函数只会在html和模板渲染之后会加载一次,但是在子组件中只有第一次的数据显示是正常的,所以需要再增加一个updated函数,在更新之后就可以重新进行取值加载,完成数据的正常显示. beforCreate(创建之前) Created(创建之后) beforMount(载入之前) Mounted(载入之后) beforUpdate(更新之前) Updated(更新之后) beforDestroy(销毁之前) Destroyed(销毁之后) activate(keep-alive组

  • 详解Vue之父子组件传值

    一.简要介绍 父子组件之间的传值主要有三种:传递数值.传递方法.传递对象,主要是靠子组件的 props 属性来接收传值,下面分别介绍: (一)传递数值 1.子组件:Header.vue <template> <div> <!-- data对象里并没有 msg 属性,这里调用的是父类传递过来的 msg 属性 --> <h2>{{msg}}</h2> </div> </template> <script> expo

  • 基于Vue中的父子传值问题解决

    主题是Vue中几种常见的传值方法...先写个父子传值吧 vue-cli构建项目目录,噜啦啦,这个就不用说了吧. 接着创建父子组件,父组件Father.vue,子组件Son.vue(随意起名,开心就好),然后在父组件中引入子组件,创建一个父组件的路由.车门已经焊死了,请继续往下看 1.父传子 Father.vue(用v-bind(简写 : ) 将父组件传的值绑定到子组件上) <template> <div> 我是爸爸:{{message}} <hr> <Son :t

  • vue 通过下拉框组件学习vue中的父子通讯

    vue 通过下拉框组件学习vue中的父子通讯

    如果说vue组件化开发中第一步应该了解的是什么的话,那无疑是父子组件之间是如何实现通讯的(说白了就是父子组件中数据是如何传递的),只有理解了这一步,才能更好的开发组件 这里先提出两个关键词: props 与 emit : 写这个组件之前,先看看效果图: 组件开发分析: 既然是组件: 首先组件内部数据内容肯定是可变的(如上图中的"按时间排序"之类的),这必须由父组件传入(即父组件如何将数据传个父组件); 在选择了内容之后,如何将数据传出来(即子组件如何将数据传给父组件) 先写结构: 父组

  • 基于vue中解决v-for使用报红并出现警告的问题

    代码报红对于追求优美代码的强迫症患者来说看着很不舒服,报红如下: 控制台中也会有: (Emitted value instead of an instance of Error) <Option v-for="item in searchTypeList">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for

  • 基于vue中css预加载使用sass的配置方式详解

    1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 2.在build文件夹下的webpack.base.conf.js的rules里面添加配置,如下红色部分 { test: /\.sass$/, loaders: ['style', 'css', 'sass'] } <span style="color:#454545;"

  • 基于vue中keep-alive缓存问题的解决方法

    vue开发的时候,我们经常会有这样的需求:开发一个详细页面来展示商品的详细信息,根据列表页传入的id进行请求,拿到对应的数据进行渲染. 但是一般在路由上都会加上keep-alive保持数据的状态,除非强制无缓存刷新,这就导致第一次进入详情页面时,可以在created中拿到id,但是返回后,再点击进入,就不会再走相应的生命周期了,无法拿到新的id 这时候可以使用vue的$destroy()方法 这是vue的一个生命周期,完全销毁一个实例.清理它与其它实例的连接,解绑它的全部指令及事件监听器. 不用

  • vue中使用props传值的方法

    1.静态传值(在父组件中赋值好props中属性的值传递给子组件) 父组件 <template> <div> <input v-model="message"> <child message="hello"></child> </div> </template> <script> import child from './components/child.vue' expo

  • 基于Angular中ng-controller父子级嵌套的相关属性详解

    ng-controller是为应用变量添加控制器 当有两个控制器father.child且child 在 father内,那child 可以称为子控制器,它将继承父控制器father的scope.child就可以访问到father的scope中的所有函数和变量. 例: <div ng-controller="father"> <div >name1:{{ name1 }}</div> <div ng-controller="child

  • 基于vue中对鼠标划过事件的处理方式详解

    鼠标事件进行监听 需求中,在一个table(组件)表中,对于其中一列(该列为图片列),当鼠标划过该列的某个单元格子(图片)时,需要展示出该单元格子对应的遮罩层 翻阅了一些博客,发现好多都提到了mouse事件,如mouseover.mouseout.mouseenter.mouseleave,在之后我自己也通过这种方法进行了尝试. <template> <el-table :data="tableData" stripe style="width: 100%&

  • 基于Vue中使用节流Lodash throttle详解

    在Vue中使用 Lodash.throttle 来做节流 在Vue中,有时需要对ajax请求提交进行节流操作.这时候,如果页面在请求成功之后会跳转,使用vue指令once或者加载一个loading遮罩禁止点击即可,但如果请求之后不跳转,并且loading不适用时,需要通过其他方式来实现节流,比如通过标识位判断等,这里我们着重说一下如何通过lodash.throttle来实现节流 lodash lodash是一个广受欢迎的js工具库,其中包含了各种各样的工具函数,方便开发时不需要反复造轮子,更关注

随机推荐