vue2.0中组件传值的几种方式总结

目录
  • 搭建好测试环境
  • 1.方法一
    • 父传子
    • 子传父
  • 2.方法二
    • 父传子
    • 子传父
    • 奇怪的传值
  • 3.方法三
  • 4.兄弟组件之间传值
  • 总结

搭建好测试环境

app.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>

    <child></child>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Child from './components/Child.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    Child
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
Child.vue
````html
!<template>
  <div class="Child">
      <h1>这是子组件</h1>
  </div>
</template>

<script>
export default {
    name:'Child',
    data() {
        return {

        }
    },
}
</script>

<style>

</style>

1.方法一

父传子

父组件向子组件使用props传值

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>

    <child :sendParam="send"></child>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Child from './components/Child.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    Child
  },
  data() {
    return {
      send:'父组件传给子组件的值'
    }
  },
}
</script>
<template>
  <div class="Child">
      <h1>这是子组件</h1>
      <div>{{sendParam}}</div>
  </div>
</template>

<script>
export default {
    name:'Child',
    props:['sendParam'],
    data() {
        return {

        }
    },
}
</script>

这里的props除了写成数组还可以写成对象的方式:

<script>
export default {
    name:'Child',
    data() {
        return {

        }
    },
        //方法一:用数组获取值
    //    , props:['sendParam'],

    //方法二:用对象获取值
    props:{
        sendParam:String,
    }
}
</script>

所以说在父组件给子组件传值的时候是可以传对象,布尔值,函数等,在子组件接收值的时候也可以做相应的限制或设置默认值。以对象接收时有type,default,require等参数可以设置,详细的内容可参考官网的文档。

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

子传父

子组件向父组件传值需要使用自定义事件

<template>
  <div class="Child">
      <h1>这是子组件</h1>
      <div>{{sendParam}}</div>
      <button @click="run">子传父</button>
  </div>
</template>

<script>
export default {
    name:'Child',
    data() {
        return {
            childata:'这是子传父的值'
        }
    },
    props:['sendParam'],
    methods: {
        run(){
            this.$emit('event',this.childata)
        }
    },
}
</script>
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>

    <child :sendParam="send" @event="reviceChild"></child>

    <div>{{revice}}</div>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Child from './components/Child.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    Child
  },
  data() {
    return {
      send:'父组件传给子组件的值',
      revice:''
    }
  },
  methods: {
    reviceChild(val){
      this.revice=val
    }
  },
}
</script>

子组件中的事件不一定要用click点击事件,还可以是各种可触发的事件,比如mouseover,dbclick等。

2.方法二

在父组件中加上一个ref属性并打印其结果

<child :sendParam="send" @event="reviceChild" ref="child"></child>
console.log(this.$refs.child);

在结果中我们发现了很多子组件Child中有的方法,数据。

结果表明,我们打印的this.$refs.child就是整个子组件,也就是说,我们可以在这里直接拿到子组件的值。父组件拿子组件的值同理。

父传子

<button @click="getParent">获取父组件的值</button>
getParent(){
   console.log(this.$parent.send)
}

子传父

<child :sendParam="send" @event="reviceChild" ref="child"></child>

<button @click="go">获取ref</button>
go(){
  console.log(this.$refs.child.childata);
}

奇怪的传值

父组件中添加:that="this"

<child :sendParam="send" @event="reviceChild" ref="child" :that="this"></child>

子组件中props接收

props:{
     sendParam:{
         type:String,
         default:'111'
     },
     that:{}
 },

在生命周期中输出

mounted() {
    console.log(this.that)
},

这里也可以拿到整个父组件

mounted() {
    console.log(this.that.send)//子组件拿到父组件的值
},

3.方法三

vue提供了provide,inject来实现如下场景的组件传值,父组件向子组件跨级传值

父组件:

export default {
	  name: 'App',
	  components: {
	    HelloWorld,
	    Child
	  },
	  provide:{
	    psend:'123456'
	  },
}

子组件:

export default {
    name:'Child',
    data() {
        return {
        }
    },
    inject:['psend'],
    mounted() {
       console.log(this.psend);
   },
 }

4.兄弟组件之间传值

这里vue提供了vuex来解决该需求,这里可以查看我之前写的一篇笔记

vuex使用指南

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue中子组件向父组件传值以及.sync修饰符详析

    目录 Vue中 常见的组件通信方式可分为三类 1. 之前的写法 2. .sync 修饰符 总结 传送门:Vue中 状态管理器(vuex)详解及应用场景 传送门:Vue中 $ attrs.$ listeners 详解及使用 传送门:Vue中 事件总线(eventBus)详解及使用 传送门:Vue中 provide.inject 详解及使用 Vue中 常见的组件通信方式可分为三类 父子通信 父向子传递数据是通过 props,子向父是通过 events($emit):通过父链 / 子链也可以通信($p

  • 深入了解Vue3组件传值方式

    目录 父子组件传值 props 祖孙组件传值 provide 和 inject 父组件中点击按钮向子组件传值 今天说一下 vue3 的组件间传值,学习过 vue2 的宝子们肯定知道,组件传值是 vue 项目开发过程中必不可少的功能场景,在 vue2 里面有很多传值的方式,vue3 的传值方式呢,在这里稍微整理总结一下,但是不是很全,后期可能慢慢补充. 父子组件传值 props 和 vue2 一样,vue3 也可以使用 props 进行父组件传值给子组件,这个就不多说了直接上代码. 父组件 <te

  • vue之父组件向子组件传值并改变子组件的样式

    问题描述:在做视频网站过程中发现每个视频的样式其实是大致相同的,所以就想着直接写个组件,但是又看不懂官网的传值,所以自己找了个视频看明白了. 想实现的效果: vue父组件向子组件传值具体实现代码: 父组件的代码: <!-- 注释的部分是之前没有用组件的代码 --> <!-- <ul class="videoList"> <li v-for="item in videoList" :key="item.id" c

  • vue中兄弟组件传值的两种方式小结

    目录 一. bus总线传值的使用 二. 使用常规的传值:(子传父,父再传子) 总结 本demo主要是为了演示vue项目中兄弟组件之间的传值,这里我演示了两种方式: a. bus总线传值: b. 我自己一般把它当成常规的传值(其实也就是子组件A传父组件,父组件再传子组 件B) 下边开始本次demo的编写: 一. bus总线传值的使用 在项目中创建一个单独的eventBus.js文件 该js文件的内容很简单,就是暴露一个vue实例而已. 有人喜欢在main.js全局引入该js文件,我一般在需要使用到

  • Vue父子组件传值的三种方法

    目录 前言 一.Vue父子传值的方法 二.方法详解 1.props / $emit 2.$parent / children 3.$ref 总结 提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 前言 例如:Vue的学习是路阻且艰的,这是一个系列文章,帮助vue的新手可以快速上路,创建的自己的项目,该系列文章主要讲解作者在vue学习之路上,创建项目中最重要的知识,因为笔者水平有限,希望大家多多指正,该系列文章旨在让大家感受vue的便捷,详细学习vue希望大家多多观看官方文档. 一

  • Vue 通过this.$emit()方法子组件向父组件传值(步骤分享)

    目录 子组件使用this.$emit()向父组件传值 第一步 在父组件中引入子组件 第二步 子组件向父组件传值 子组件使用this.$emit()向父组件传值 首先必须在父组件中引用子组件,然后实现传值 第一步 在父组件中引入子组件 使用import引入组件 import indexImportOrder from './components/indexImportOrder' 声明 //定义组件 components:{ indexImportOrder, }, 使用 <indexImport

  • vue3父子组件传值 双向绑定及注意问题小结

    attribute agruments vue3父子组件传值 双向绑定 及注意事项 https://www.jb51.net/article/269785.htm 可以参考下 首先注意 父子组件传值是单项数据流,vue3中子组件是不能直接修改父组件数据的,vue2中是可以直接使用sync的语法,直接进行修改的而sync修饰符的作用则是简化事件声明及监听的写法. 注意事项: // 父组件 // v-model 没有指定参数名时,子组件默认参数名是modelValue <ChildComp v-mo

  • 分享Vue组件传值的几种常用方式(一)

    目录 前言 第一种:父向子传值 新建文件导入结构 引入 注册 使用子组件 子组件内部代码完善 父组件内部代码完善 操作main.js文件 思路总结 前言 大家好,这个系列我们来讲解一下vue组件传值的几种常见方法和逻辑链路.最常见的vue组件传值分为三种,第一种是父向子传值,第二种是子向父传值,第三种是兄弟组件之间的传值,下面我们先就第一种情况来进行分析和编写. 第一种:父向子传值 父向子传值意思就是要把父组件里的值传递给子组件,方法是在子组件内部自定义一个props属性,通过props属性来完

  • vue父子组件动态传值的几种方式及注意问题详解

    1.vue父组件向子组件动态传值的两种方法 在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片,因为有时候获取到的会是空,所以这里要考虑到动态获取. 方法有两种, vue父组件向子组件动态传值方法一: props传值,这里注意一个问题,传过来的值需要用watch监听并赋值,否则这里获取到的是空数组 父组件: <uploadImg :width="200" :

  • Vue3兄弟组件传值之mitt的超详细讲解

    目录 前言 比起 Vue 实例上的 EventBus,mitt.js 好在哪里呢? 项目中安装mitt 使用方式一:在原型中声明 使用方式二:在组件中引用 总结 前言 Vue2.x 使用 EventBus 事件总线进行兄弟组件通信,而在Vue3中事件总线模式已经被移除,官方建议使用外部的.实现了事件触发器接口的库,例如 mitt 或 tiny-emitter. 比起 Vue 实例上的 EventBus,mitt.js 好在哪里呢? 首先它足够小,仅有200bytes. 其次支持全部事件的监听和批

随机推荐