如何在 Vue.js 中声明反应属性

Posted 2023-02-22

【中文标题】如何在 Vue.js 中声明反应属性

【英文标题】：How do I declare reactive properties in Vue.js

【发布时间】：2018-09-23 22:34:58

【问题描述】：

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

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

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

vue.js:597 [Vue 警告]：属性或方法“bga”、“bgb”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

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

这应该用于改变“容器” div 和“顶部” div 的颜色：

Index.html

    <div id="container" v-bind:style="bga">
        <div class="top" v-bind:style="bgb">
            <div id="app">
                <h1 id="vueHead">Vue routing</h1>
                <h2 class="menu">
                    <router-link to="/">Color</router-link>
                    <router-link to="/main">Main</router-link>
                    <router-link to="/settings">Settings</router-link>
                    <router-link to="/vue">Vue</router-link>
                </h2>

            </div>
        </div>
          <router-view></router-view>
    </div>

Vue 路由放在 index.js 中：

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,
);

【参考方案1】：

当你创建一个组件时，一些典型的语法与 Vue 之间存在细微的差异。例如Data Must Be a Function。

..
data: 
  reactive: true,

..

在标准的 Vue 实例中，上面的内容非常好。但是，当您创建组件时，数据属性需要是一个返回对象的函数：

..
data() 
  return  reactive: true 

..

您还可以使用props，就像data 中的任何其他属性一样。

【讨论】：

我正在尝试找出语法，但我不明白：JSFiddle。我能做什么？

@josefdev template 是组件自己的属性，不应由data 函数返回。