首页 >web前端 >Vue.js > 正文

vue兄弟组件传值有哪五种方法

原创2021-05-20 11:52:4702032

五种方法为:1、父组件向子组件进行传值;2、子组件向父组件进行传值;3、父组件中的标签上定义自定义事件,在事件内部获取参数;4、在子组件中触发自定义事件,并传参;5、通过公共组件Bus.js,进行传参。

本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

vue组件传值的五种方法:

1、父组件向子组件进行传值:

在子组件绑定父的数据,子组件通过props接受参数。

接下来我们通过一个例子,说明父组件如何向子组件传递值:在子组件Users.vue中如何获取父组件App.vue中的数据 users:["Henry","Bucky","Emily"]

//App.vue父组件
<template>
  <div id="app">
    <users v-bind:users="users"></users>//前者自定义名称便于子组件调用,后者要传递数据名
  </div>
</template>
<script>
import Users from "./components/Users"
export default {
  name: 'App',
  data(){
    return{
      users:["Henry","Bucky","Emily"]
    }
  },
  components:{
    "users":Users
  }
}
//users子组件
<template>
  <div class="hello">
    <ul>
      <li v-for="user in users">{{user}}</li>//遍历传递过来的值,然后呈现到页面
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props:{
    users:{           //这个就是父组件中子标签自定义名字
      type:Array,
      required:true
    }
  }
}
</script>

2、子组件向父组件进行传值:

父组件内设置要传的数据『data(){ id: value}』

接下来我们通过一个例子,说明子组件如何向父组件传递值:当我们点击“Vue.js Demo”后,子组件向父组件传递值,文字由原来的“传递的是一个值”变成“子向父组件传值”,实现子组件向父组件值的传递。

6X}`A{T4$7)KVCIP@%%BC%5.png

// 子组件
<template>
  <header>
    <h1 @click="changeTitle">{{title}}</h1>//绑定一个点击事件
  </header>
</template>
<script>
export default {
  name: 'app-header',
  data() {
    return {
      title:"Vue.js Demo"
    }
  },
  methods:{
    changeTitle() {
      this.$emit("titleChanged","子向父组件传值");//自定义事件  传递值“子向父组件传值”
    }
  }
}
</script>
// 父组件
<template>
  <div id="app">
    <app-header v-on:titleChanged="updateTitle" ></app-header>//与子组件titleChanged自定义事件保持一致
   // updateTitle($event)接受传递过来的文字
    <h2>{{title}}</h2>
  </div>
</template>
<script>
import Header from "./components/Header"
export default {
  name: 'App',
  data(){
    return{
      title:"传递的是一个值"
    }
  },
  methods:{
    updateTitle(e){   //声明这个函数
      this.title = e;
    }
  },
  components:{
   "app-header":Header,
  }
}
</script>

3、父组件中的标签上定义自定义事件,在事件内部获取参数;

4、在子组件中触发自定义事件,并传参。(this.$ emit('父组件中的自定义事件',参数))

5、通过公共组件Bus.js,进行传参

【相关推荐:《vue.js教程》】

以上就是vue兄弟组件传值有哪五种方法的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:vue 组件传值
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    醉折花枝作酒筹

    飞花飘絮,霓裳翩翩舞,几多情愫心飞扬。

    最近文章
    css如何设置指定网格的大小和位置408
    css如何定义网格线大小1117
    教你一招搞定css背景图的大小788
    推荐视频教程
  • 2天速成VueJS免费公益直播课2天速成VueJS免费公益直播课
  • Vue.js 开发基础教程Vue.js 开发基础教程
  • Vue.js开发基础Vue.js开发基础
  • 视频教程分类