Question

我误解了将子组件传递给其他子组件的文档。

我有两个组件

的index.html

<main-categories-products source="{{ url('api/products') }}">
</main-categories-products>

<sidebar-options> </sidebar-options>

我的app.js

 var app = new Vue({
  el: '#app',
  components: {
    MainCategoriesProducts,
    SidebarOptions
  }

})

MainCategoriesProducts.vue

import Vue from 'vue'
var bus = new Vue()
    export default{
        props: ['source'],
        created(){

            this.fetchedProduct()
        },
        methods: {

            fetchedProduct: function(){


                        var data = [1,2, 3];

                        bus.$emit('did-something', data);


            }
        }
    }

我的SidebarOptions.vue

import Vue from 'vue'
    var bus = new Vue()

    export default{

        data(){

            return {

                someData: {}
            }
        },

        created(){

            bus.$on('did-something', data => this.someData = data);
            console.log(this.someData)

        }
    }

没有错误，但我无法将MainCategoriesProducts的数据传输到SidebarOptions。我怎样才能获得这些数据= [1,2,3]？ TY

Answer 1

您正在创建两个不同的总线，您应该只创建一个。

在app.js中添加此

CREATE TABLE `inventoryitems` (
  `inventoryitemid` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `type` tinyint(3) unsigned NOT NULL,
  `characterid` int(11) DEFAULT NULL,
  `accountid` int(11) DEFAULT NULL,
  `itemid` int(11) NOT NULL DEFAULT '0',
  `inventorytype` int(11) NOT NULL DEFAULT '0',
  `position` int(11) NOT NULL DEFAULT '0',
  `quantity` int(11) NOT NULL DEFAULT '0',
  `owner` tinytext NOT NULL,
  `petid` int(11) NOT NULL DEFAULT '-1',
  `flag` int(11) NOT NULL,
  `expiration` bigint(20) NOT NULL DEFAULT '-1',
  `giftFrom` varchar(26) NOT NULL,
  PRIMARY KEY (`inventoryitemid`),
  KEY `CHARID` (`characterid`),
  KEY `inventorytype` (`inventorytype`),
  KEY `type` (`type`),
  KEY `accountid` (`accountid`)
) ENGINE=InnoDB AUTO_INCREMENT=79597880 DEFAULT CHARSET=latin1

并删除

window.bus = new Vue();

来自每个组件。

将数据从子组件传递到子组件Vuejs 2

1 个答案: