Question

我有一个简单的Vue应用程序：

const Home = { template: '<div>Home</div>' }
const Bar = {
  methods: {
    bar () {
        alert('bar')
        this.$emit('test')
    }
  },
  template: `
     <div>
        <button  @click="bar()">Bar</button><br/>
        <router-link @click.native="bar()" to="/">Home</router-link>
     </div>
  `
}

const Foo = {
  components: { Bar },
  methods: {
    foo () {
        alert('foo')
    }
  },
  template: '<Bar @test="foo()" />'
}

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/foo', component: Foo }
  ]
})

new Vue({ router, el: '#app' })

https://jsfiddle.net/tqp5yc6z/5/

通过单击Bar组件中的Bar按钮，将出现两个带有bar和foo文本的警报。那是预期的行为。

但是，通过单击Home组件中的Bar链接，将只有一个带有bar文本的警报，尽管{{1} }方法将被执行。我想知道为什么会这样吗？

Answer 1

这是因为test组件在发出bar事件之前已被销毁。最好的解决方案是将Foo替换为test的{{1}}：

<router-link @click.native="bar()" to="/">Home</router-link>

路由器链接未发出事件

1 个答案: