Question

在创建带有香草JS的动态子级后，我遇到了一个问题，即我正在创建要应用到根应用程序的组件。当我在控制台中查看Vue对象时，不显示消息，我希望它是-有人可以告诉我原因吗？

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

下面是经过测试的实际代码：

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.js反应式插值不起作用

0 个答案: