Javascript 如何通过事件总线传递引用，以便将其设置为null

我正在使用Vue2，希望有一个可重用的选定项组件。它将引用一个可以在事件总线上发送消息以将该项设置为null的项。这也是我第一次使用Vue，而不是在单个文件component/Vue文件场景中

我有以下代码，并对有问题的行进行了注释：

var bus = new Vue()

Vue.component('selected-item', {
  props: ['item'], 
  methods: {
    setToNull(item){
      bus.$emit('setToNull', item);
    }
  },
  template: `<span>
               <div class="button round btn-app-class selected-btn">{{item.name}}<sup><span class='btn-delete link' @click="setToNull(item)">x</span></sup></div>
             </span>   
            `
})

var vm = new Vue({
  template:`
      <div>
        <div v-if="selectedApp">
           <selected-item :item="selectedApp"></selected-item>
        </div>
        <div v-else>
          no app selected
        </div>
      </div>
   `,
    data(){
      return {
        selectedApp: {id: 1, name: 'here is my name'}
      }
    },
    mounted(){
     bus.$on('setToNull', function (item) {
      alert('within setToNull for: ' + item.name); // this works and outputs here is my name 
      item = null; // this doesn't work
    })

    }
})    

var-bus=new-Vue（）
Vue.组件（“选定项”{
道具：['item']，
方法：{
setToNull（项目）{
总线$emit（'setToNull'，项目）；
}
},
模板：`
{{item.name}}x
`
})
var vm=新的Vue({
模板：`
未选择任何应用程序
`,
数据（）{
返回{
selectedApp:{id:1，name:'这是我的名字'}
}
},
安装的（）{
总线$on（'setToNull'，功能（项目）{
alert（'inthesettonull for:'+item.name）；//这起作用并输出这里是我的名字
item=null；//这不起作用
})
}
})    

我做错了什么？有更好的方法吗

编辑#1 看起来，将selectedApp设置为捕获发出的事件很有效！还删除了总线和一些无关的代码。像这样：

      <selected-item @remove="selectedApp = null" :item="selectedApp"></selected-item>

---

这是

这个。选择了app

你想设置为

null

mounted(){
 bus.$on('setToNull', function (item) {
  alert('within setToNull for: ' + item.name);
  this.selectedApp = null;
})

---

您可以使用回调样式而不是事件总线，它将允许您根据需要多次重用组件，下面是一个示例：

Vue.component（'selected-item'{
道具：['item'，'callback'，'objName']，
方法：{
setToNull（）{
this.callback（this.objName）；
}
},
模板：`
{{item.name}
x
`
})
var vm=新的Vue({
el:“#应用程序”，
模板：
`
未选择任何应用程序
`,
数据（）{
返回{
selectedApp:{id:1，name:'这是我的名字1'}，
selectedApp2:{id:2，name:'这是我的名字2'}，
selectedApp3:{id:1，name:'这是我的名字3'}
}
},
方法：{
回调（objName）{
log（'回调时收到的对象名'+objName）；
此[objName]=null；
log（'clean value from local parent state'）；
log（这个[objName]）；
}
}
});

给你举个例子


“严格使用”
const bus=新的Vue；
常量selectedItem={
模板：'#selectedItemTpl'，
道具：['item']，
方法：{
setToNull（项目）{
总线$emit（'remove-item'，item）；
}
}
}
var app=新的Vue({
el:“#应用程序”，
组件：{selectedItem}，
数据（）{
返回{
selectedItems:newarray（5）.fill（“”）.map（（o，i）=>（{id:i，name:'item-'+i}））
}
},
创建（）{
总线$on（'remove-item'，item=>{
让items=this.selectedItems；
对于（让i=0；我为什么不使用
this.selectedApp=null
而不是
item=null
？@Sphinx thx（再次）-我们将与不同的
项一起使用
，因此希望将有问题的项设置为空。检查并且您需要调整事件名称，检查，您应该始终使用kebab case作为事件名称。然后您可能不需要为事件控制创建另一个Vue instance=Bus，只需使用
this.$emit或this.$on
thx@Sphinx进行观察s-我用fiddle的链接更新了底部的代码。这似乎有效-这就是你的意思吗？我不知道这样做！对-但我们想与只支持名称属性的不同项目重用，所以
selectedApp
，
selectedNetwork
等…@timpone:然后传递所需变量的名称（并将这些变量放在可预测的位置）。JS不支持按引用传递，因此不能传递变量——最终只能传递其值，这基本上意味着您不能以调用方将看到的任何方式将其置零。@timpone即使您使用
refs
，问题也来自于您的条件显示
v-if=“selectedApp”
。如果要切换到
v-else
，必须将
selectedApp
设置为
null
。