vue中传值的方法

最新推荐文章于 2024-08-16 07:34:20 发布

czw2ly

最新推荐文章于 2024-08-16 07:34:20 发布

阅读量3.3k

点赞数 1

分类专栏：组件传值文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/czw2ly/article/details/128192633

版权

本文介绍了Vue中组件间的通信方式，包括父传子（props）、子传父（$emit和事件）、兄弟组件传值、使用Vuex进行任意组件传值以及祖孙组件间的provide/inject通信。Vuex作为状态管理器，提供响应式数据，可结合localstorage持久化数据。提供/注入API用于解决跨级组件通信问题。

摘要由CSDN通过智能技术生成

1，父传子

父组件通过props向下传递数据给子组件

//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>