У меня есть вопрос о структуре компонентов Vue - PullRequest
Новая
       8

У меня есть вопрос о структуре компонентов Vue

0 голосов
/ 19 декабря 2018

Во время изучения Vue Самоучкой я столкнулся с некоторой проблемой.

Сначала я связываю некоторый компонент с помощью new Vue ({el:" # id "}).

И когда я связываю корневой компонент <div id = "app"> с помощью new Vue ({el:" # app "}),

Это разрушает то, что там уже было привязано.

Моя функция и данные в new Vue ({el:" # id "}) больше не работают.

Я делаю неправильный дизайн?

Если да, то как мне подойти к проблеме? 

<html>
<head>
    <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div id="comp-a">
            <input type="text" v-model="message"/>
            {{message}}
        </div>
    </div>
</body>
<script>
    new Vue({
        el : "#comp-a",
        data : {
            message : "message"
        }
    })
    new Vue({
        el : "#app"
    })
</script>

Ответы [ 2 ]

0 голосов
/ 19 декабря 2018

Вы можете использовать компонент.ссылка: https://vuejs.org/v2/guide/components.html

let comp_a=Vue.component('comp-a', {
  data: function () {
    return {
      message: ""
    }
  },
  template: ` <div><input type="text" v-model="message"/>
            {{message}}</div>`
});
let app = new Vue({
	el:"#app"

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <comp-a></comp-a>
</div>

Если вы хотите использовать html-код компонента в html-области.Шаблон может указывать на идентификатор.Вы можете сделать следующее: 

let comp_a=Vue.component('comp-a', {
  data: function () {
    return {
      message: ""
    }
  },
  template: "#comp-a"
});

let app = new Vue({
	el:"#app"

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <comp-a></comp-a>
</div>

<template id="comp-a">
<div>
  <input type="text" v-model="message"/>
            {{message}}
 </div>
</template>
0 голосов
/ 19 декабря 2018

VueJS не работает таким образом.Вы не вкладываете идентификаторы.Вы можете сделать это: 

 <html>
 <head>
     <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
 </head>
 <body>
    <div id="app">

    </div>

    <div id="comp-a">
        {{message}}
    </div>
</body>
<script>
  new Vue({
    el : "#app"
  })
  new Vue({
    el : "#comp-a",
    data : {
        message : "message"
    }
  })
</script>

Но даже у этого подхода есть проблемы.У вас действительно должна быть только одна соответствующая область VueJS.

Единственная причина иметь два - если у вас действительно два приложения, работающие в одном и том же HTML-файле.Я никогда не видел причин для этого.

...