将 json 对象一个组件传递给另一个 vuejs

Posted 2023-02-23

【中文标题】将 json 对象一个组件传递给另一个 vuejs

【英文标题】：Pass json object one component to another vuejs

【发布时间】：2018-09-05 09:45:24

【问题描述】：

我是 vuejs 的新手，我想将一个 JSON 对象传递给同一个 vue 实例中的另一个组件。下面显示我的代码。从组件添加用户到组件视图用户。我尝试了 vue 道具，但它没有用 非常感谢。

Vue.component('view-users',
  props:['user'],
  template: '<span> user.name </span>'
); 

Vue.component('add-user',
	data: function()
  		return 	
      		user:
          	name:'jhon',
            age:'29',
          
      
  
);

var app = new Vue(
	el:'#app',
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="app">
<add-user></add-user>

<view-users></view-users>
</div>

【参考方案1】：

Props 主要用于将数据从父组件传递给子组件，子组件不能直接修改传递的数据并反映父组件的更改。为了在每个组件之间传递数据，一个很好的方法是使用Vuex。

首先你创建状态，可能像

const state = 
  user:
    name:'john',
    age:'29',
  

对于最简单的情况，即您暂时不做任何异步操作，您可以通过mutations 修改状态：

const mutations = 
  CHANGE_NAME(state, payload) 
    state.user.name = payload
  ,
  CHANGE_AGE(state, payload) 
    state.user.age = payload
  

有了所有这些，您就可以创建 Vue 商店了：

const store = new Vuex.Store(
  state,
  mutations
)

然后在你的 Vue 实例中使用它：

const app = new Vue(
  el: '...',
  data:  ... ,
  store,
  // ...
)

最后，在您的组件中，您可以按如下方式访问和修改状态：

Vue.component('my-component', 
  data() 
    return 
      // ...
    
  ,
  computed() 
    user() 
      // this is one way to do, you can also check out mapstate
      return this.$store.state.user
    
  ,
  methods: 
    // you can also check out mapMutations
    changeName(val)  this.$store.dispatch('CHANGE_NAME', val) ,
    changeAge(val)  this.$store.dispatch('CHANGE_AGE', val) ,
  
)

这是一个简单的例子：http://jsfiddle.net/teepluss/zfab6tzp/6/

如果您的应用不太大（tutorial 和 documentation），您也可以使用 EventBus。对于Vuex，您可以在此处查看如何使用state 和mutations。

【讨论】：

非常感谢。你节省了我的时间:)

【参考方案2】：

如果您在许多组件中使用变量，vuex 可能是更好的主意。但是如果你想将值传递给组件，你可以这样使用

<div id="app">
  <add-user :user=user></add-user>
  <view-users :user=user></view-users>
</div>

import AddUser from '../add-user.vue'
import ViewUser from '../view-users.vue'

var app = new Vue(
    el:'#app',
    components: 
     'add-user': AddUser,
     'view-users': ViewUser
    
);

在 view-user 或 add-user 组件中你可以这样声明

<template><span> user.name </span></template>
<script>
    export default 
      props: 
        user: 
          type:'your type',
          required: true/false
        
      ,
      ...
    
</script>

【参考方案3】：

您可以使用简单的外部状态管理系统。 Reference

或者您可以使用事件处理从一个组件发出事件并在另一个组件中侦听该事件。 Reference

还可以查看这篇关于在组件之间共享数据的博客文章。 Link