vue.js - vue新手，遇到了问题，这段代码为什么会报错？

问题描述

问 题

我是根据官方的栗子来学的
报了这个错：

html:

<div id="app-test1">
    <app-title></app-title>
    <app-content></app-content>
</div>

js:

Vue.component('app-title',{
    template: '<h3>{{ title }}</h3>'
});
Vue.component('app-content',{
    template: '<p>{{ content }}</p>'
});

var appTest1 = new Vue({
    el: '#app-test1',
    data: {
        title: '这是组件',
        content: '这是组件这是组件这是组件这是组件这是组件这是组件这是组件这是组件'
    }
});

解决方案

并不是data造成的，写组件时data应该才是function吧。
因为你写的是两个组件，所以父组件与子组件之间的参数传递应该要靠props，，因此需要在子组件内加入props属性，并且在html里加入v-bind。所以代码如下：

<div id="app-test1">
    <app-title :title='title'></app-title>
    <app-content :content='content'></app-content>
</div>

Vue.component('app-title',{
    template: '<h3>{{ title }}</h3>',
    props: {
      title: {
        type: String
      }
    }
});
Vue.component('app-content',{
    template: '<p>{{ content }}</p>',
    props: {
    content: {
      type: String
      }
    }
});

var appTest1 = new Vue({
    el: '#app-test1',
    data: {
            title: '这是组件',
            content: '这是组件这是组件这是组件这是组件这是组件这是组件这是组件这是组件'
    }
});

这篇关于vue.js - vue新手，遇到了问题，这段代码为什么会报错？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！