0

我在使用 Vue.js 和他的路由系统时遇到了一些麻烦。我在这里做了一个例子。

为什么当我使用模板（参见 Foo）时该方法正确附加，而当我使用 el（参见 Bar）时为什么不正确？

这是他的代码：

index.js

var Foo = Vue.extend({
    template: '<p v-on:click.prevent="foo">This is foo!</p>',

  methods: {
      foo: function(){
        alert('YEAH')
      }
    }
})

var Bar = Vue.extend({
    el: function(){
      return '#bar'
    },

    methods: {
      bar: function(){
        alert('YEAH')
      }
    }
})

var App = Vue.extend({})

var router = new VueRouter()

router.map({
    '/foo': {
        component: Foo
    },
    '/bar': {
        component: Bar
    }
})

router.start(App, '#app')

索引.html

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- use v-link directive for navigation. -->
    <a v-link="{ path: '/foo' }">Go to Foo</a>
    <a v-link="{ path: '/bar' }">Go to Bar</a>
  </p>
  <div id="bar" v-bind:class="$route.path == '/bar' ? '' : 'hidden'">
    <p v-on:click.prevent="bar">This is bar!</p>
  </div>
  <!-- use router-view element as route outlet -->
  <router-view></router-view>
</div>
4

2 回答 2

3

你误解了el目的。当你传递el给组件时，它会告诉 Vue 在哪个元素上挂载自己

请注意，提供的元素仅用作安装点；如果还提供了模板，它将被替换，除非替换设置为 false。解析的元素将作为 vm.$el 访问。

实际上#bar，Vue 内部没有可以编译的模板，这就是没有输出的原因。在el另一个 Vue el（在你的情况下#app）中使用也是一个坏主意。该v-on:click.prevent="bar"位在父级（App实例）范围内编译，并且由于App没有bar方法，您会收到警告。

更好的解决方案： http ://codepen.io/anon/pen/zqWKrg

请注意，现在每个组件都有自己的模板，您可以清楚地看到每个组件的范围：#app在App范围内#foo编译，在Foo范围内编译，在范围内#bar编译Bar。

于 2016-04-13T13:31:30.927 回答
0

  1. 你应该使用template: '#bar'而不是选项不是模板的选择器el: '#bar'。el

    var Bar = Vue.extend({ template: '#bar',

    methods: {
  bar: function(){
    alert('YEAH')
  }
}

    })

  2. 您（ab）在 Apps 主模板中使用常规 HTML 元素作为组件的子模板 - 这不是您应该做的事情。

这也是单击事件不起作用的原因：该 div 的内容，包括单击事件，由 App 组件评估，而不是 Bar 组件。并且 App 组件没有“bar”方法。

因此控制台中的错误：

[Vue 警告]：v-on:click="bar" 需要一个函数值，未定义

模板应如下所示：

<script type="x-template" id="bar">
  <div>
    <p v-on:click.prevent="bar">This is bar!</p>
  </div>
</script>

<!-- or with HTML5 template tag: -->
<template id="bar">
  <div>
    <p v-on:click.prevent="bar">This is bar!</p>
  </div>
</template>
于 2016-04-13T13:21:56.963 回答