vue.js - Vuejs反应性属性插值不起作用

问题描述

我遇到了一个问题，我正在创建组件，然后将这些组件应用于根应用程序 - 在创建一个带有 vanilla JS 的动态子代之后。当我在控制台中查看 Vue 对象时，消息不存在，我希望它是 - 谁能告诉我为什么？

创建应用程序
createElement使用 {{ message }} 属性动态添加新的 DOM 元素（例如<div id="test">{{message}}</div>：）
使用 Vue.Component 创建自定义组件（例如：<custom-component><custom-component>带预填充{{ messsage }}值测试消息
使用组件渲染 Vue，并更新 props 值{{ message }}

下面是实际测试的代码：

import Vue from 'vue/dist/vue.js';
export default {
  name: 'app',
  components:
  {
    HelloWorld
  },
  data()
  {
    return this;
  },
  mounted()
  {

    // #2 Create an Html Target that contains the component's name 'custom-element'
    var v = document.createElement('div');
      v.setAttribute('id', 'test');
      v.innerHTML = '<custom-element></custom-element>';
    var $element = this.$el.prepend(v);

    // #1 Create a component
    var MyComponent = Vue.component(
      'custom-element',
      {
        template: '<div v-bind:id="UID">{{message}}</div>',
        prop: ['UUID', 'message'],
        data() {
          return {
            UID: '',
            message: 'test message',
          }
        },
      }
    );

    // #3 Append the component to the Html Target
    window.vm = new Vue({
        el: '#test',
        components: {
          'custom-component': MyComponent,
        },
        beforeCreate() {
          return {
            UID: 'x7x7x',
            message: 'test message update...'
          }
        },
    })

    window.console.log(MyComponent);
    window.console.log(this);
  }
}`

这是主要的 index.html：

`<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>hello-world</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but hello-world doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>'

这是 main.js

'use strict'

import Vue from 'vue'
import App from './App.vue'
import Reaktr from './js/reaktr.js'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  data: {
    Reaktr: new Reaktr(),
  },
  mounted() {

  }
}).$mount('#app')

这是 Helloworld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

标签： vue.jspropertiesreactive

vue.js - Vuejs反应性属性插值不起作用

问题描述

解决方案

推荐阅读