Компонент добавления Vue2 для компиляции пакета и доступа к данным хранилища - PullRequest
0 голосов
/ 30 апреля 2018

Надеюсь, я правильно спрашиваю. У меня есть скомпилированное приложение Vue, и я хотел бы добавить компоненты вне кода компиляции, который был бы моим основным кодом. Я не хочу, чтобы никто не трогал основной код, но они могут создавать компоненты и получать доступ к данным хранилища внутри компонента vue. Как этого достичь?

  1. Добавление компонента в приложение compile vue
  2. Доступ к хранилищу vuex внутри компонента

HTML index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <title>chatbot</title>
    <script src=https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js></script>
    <link href=/static/css/build.css rel=stylesheet>

</head>

<body>
    <div id=app></div>

    <script type=text/javascript src=/static/js/manifest.js></script>
    <script type=text/javascript src=/static/js/vendor.js></script>
    <script type=text/javascript src=/static/js/build.js></script>

</body>

</html>

HelloWorld.vue

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

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

1 Ответ

0 голосов
/ 01 мая 2018

Кажется, вы хотели бы разрешить обычному пользователю доступ к состоянию хранилища, но не позволяют им изменять его.

Решение 1:

Возможно, вы захотите использовать $refs, а затем вызвать методы этого компонента для доступа к данным (или $ store.state)

Решение 2:

с использованием пользовательского события, такого как Руководство по связям компонентов .

Коды будут выглядеть так:

Vue.config.productionTip = false

let componentOptions = {

  template: `<div>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <button @click="changeData()">Click me!!!</button>
  </div>
</div>`,
  data() {
    return {
      msg: 'Test'
    }
  },
  computed: {
    computedMsg: function () {
      return 'computed: ' + this.msg
    }
  },
  methods: {
    getData: function () {
      return this.computedMsg
    },
    changeData: function () {
      this.msg += '@'
      this.$emit('mymessage', 'computed: ' + this.msg)
    }
  }
}

Vue.component('child', componentOptions)

new Vue({
  el: '#app',
    data() {
      return {
        childMsg1: 'Welcome to Your Vue.js App',
        childMsg2: 'Welcome to Your Vue.js App'
      }
  },
  methods:{
    getChildData: function () {
      this.childMsg1 = this.$refs.test.getData()
    },
    getDataChangeForChild: function (data) {
      this.childMsg2 = data
    }
  }
})

let childBuilder = Vue.extend(componentOptions)
let yourChild = new childBuilder()
yourChild.$mount('#your-app')
function getData() {
  document.getElementById('your-app-data').innerText = yourChild.getData()
}
.hello {
  background-color:gray
}
span {
  color:red;
}
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>

<div id="app">
<h2>Case 1</h2>
  <button @click="getChildData()">Get Child Data</button>
  <p>Solution 1: {{childMsg1}}</p>
  <p>Solution 2: {{childMsg2}}</p>
  <child ref="test" v-on:mymessage="getDataChangeForChild"></child>
</div>
<h3 onclick="getData()">Case 2 (Click me to see the latest data): 
  <span id="your-app-data"></span>
</h3>
<div id="your-app"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...