2019-07-16-模板无法使用,编译出错

96
xiaojianxu
2019.07.16 09:55* 字数 690

使用 component

定义一个名为 button-counter 的新组件

Vue.component('button-counter', {
    data: function () {
        return {
            count: 0
        }
    },
    template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

npm run serve 后,浏览器端 console 出现如下报错

You are using the runtime-only build of Vue where the template compiler is not available. 
你正在使用【紧运行时】的 Vue,模板编译器不可用。
Either pre-compile the templates into render functions, or use the compiler-included build.
你可以将模板预编译,到渲染方法中,或使用含有编译的 build.

每个组件都会各自独立维护它的 count。每用一次组件,就会有一个它的新实例被创建。

  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>

data 必须是一个函数

当我们定义这个 <button-counter> 组件时,它的 data 并不是直接这样提供一个对象:

data: {
  count: 0
}

一个组件的 data 选项必须是第一个函数。


组件的组织

通常一个应用会以一颗嵌套的组件树的形式来组织:

从页面结构到组件树结构

你可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件。

要在模板中使用组件,必须先注册组件,以便 Vue 能够识别。
组件的注册类型:全局注册和局部注册

全局注册: Vue.component

Vue.component('my-component-name', {
   // ... options ...
})

全局注册的组件可以用在其被注册之后的任何(通过 new Vue)新创建的 Vue 根实例,也包括其组件树中的所有子组件的模板中。


通过 Prop 向子组件传递数据

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候,就变成了那个组件实例的一个属性。

为了给 blog-post 组件传递一个标题,我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中:

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3></h3>'
})

一个组件默认可以拥有任意数量的 prop,任何值都可以传递给任何 prop。在组件实例中,就像访问 data 中的值一样访问 prop。

一个 prop 被注册之后,可以像如下把数据作为一个自定义特性传递进来:


<blog-post title="My journey with my family"></blog-post>
<blog-post title="Blogging with my journey"></blog-post>
<blog-post title="Writting is so fun"></blog-post>

every component must have a single root element

每个组件必须只有一个根元素,你可以将模板的内容包裹在一个父元素内。


<div class="blog-post">
    <h3>{{ title }}</h3>
    <div v-html="content"></div>
</blog-post>

监听子组件事件

子组件,它的一些功能可能要求和父组件进行沟通。如:一个辅助功能放大博文的字号,同时让页面的其他部分保持默认的字号。

<div id="app">
  <div :style="{ fontSizeL postFontSize + 'em' }">
    <blog-post
      v-for="post in posts"
      v-bind:key="post.id"
      v-bind:post="post">  
    </blog-post>
  </div>
</div>

添加按钮

 Vue.component('blog-post', {
    props: ['post'],
    template: `
      <div class="blog-post">
        <h3>{{ post.title }}</h3>
        <button>Enlarge text</button>
        <div v-html="post.content"></div>
      </div>
    `
  })

点击按钮时,我们需要告诉父级组件放大所有博文的文本。如何解决呢?
(1)父级组件可以像处理 native DOM 事件一样通过 v-on 监听子组件实例的任意事件:

<blog-post
...
v-on:enlarge-text="postFontSize += 0.1"
></blog-post>

同时子组件可以通过调用内建的 $emit 方法并传入【事件名称】来触发一个事件:

<button v-on:click="$emit('enlarge-text')">
  Enlargeg 
</button>
vue-js