Javascript 如何在Vue.js中声明被动属性

这是Vue路由应用程序的一部分，在其中一个路由中，我有两个属性，bga和bgb，用于更改div的颜色。我不知道如何正确申报，我该怎么做

我在Chrome控制台中收到以下消息：

• vue.js:597[vue warn]：“data”选项应该是在组件定义中返回每个实例值的函数。 warn@vue.js:597

• vue.js:597[vue warn]：属性或方法“bga”，“bgb”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的。请参阅：

ColorPage.js

const ColorPage = {
    props:
        ['bga', 'bgb'],
    data: {
        bga: {
            backgroundColor: ''
        },
        bgb: {
            backgroundColor: ''
        }
    },
    template: `
<div id="middle">
    <label id="colorLabel"><h2>'Change Colors By Typing Their Names:'</h2></label>
    </br>
    <input type="text" class="colorInput" v-on:input="bga.backgroundColor = $event.target.value" placeholder="here...">
    </br>
    <input type="text" class="colorInput"  v-on:input="bgb.backgroundColor = $event.target.value" placeholder="... and here!">
</div>
`
    ,

};

export default ColorPage

---

创建组件时，Vue的一些典型语法之间存在细微差异。比如说

在标准的Vue实例中，上述情况非常好。但是，创建组件时，数据属性需要是返回对象的函数：

..
data() {
  return { reactive: true }
}
..

---

此外，您可以使用的属性与

数据中的任何其他属性一样

我正在尝试找出语法，但我没有弄清楚它的正确性：。我能做什么？@josefdev

template

是组件自己的属性，不应由

data

函数返回。

import MainPage from '../components/mainPage.js'
import ColorPage from '../components/colorPage.js'

const routes = [
    {path: '/', component: ColorPage},
    {path: '/main', component: MainPage},

];
const router = new VueRouter({
    routes // short for `routes: routes`
});

var vm = new Vue({
    el: '#container',
    router,
});

..
data: {
  reactive: true,
}
..

..
data() {
  return { reactive: true }
}
..