Vue n'a-t-elle qu'une seule instance racine de vue ?

Vue.js est un framework JavaScript très populaire dans le domaine du développement front-end. Son objectif est de créer des interfaces utilisateur via des composants afin que les développeurs puissent créer des applications Web plus rapidement et de manière plus fiable.

Une application Vue est composée d'instances Vue. L'analogie avec une application Web est composée de divers composants. L'instance Vue est ce composant, comprenant des modèles, des données et des méthodes. En termes simples, le rôle de chaque instance de Vue est de contrôler le DOM d'une zone spécifique et de gérer certains événements de ces DOM.

Normalement, il n'y a qu'une seule instance racine Vue dans une application Vue. Cette instance racine peut être créée via la fonction new Vue : new Vue函数进行创建：

new Vue({
  el: '#app', // 绑定的DOM元素
  data: {     // 数据
    msg: 'Hello Vue!'
  },
  methods: {  // 方法
    handleClick: function() {
      alert('Button Clicked!')
    }
  }
})

在上面的代码中，我们将一个 Vue 实例绑定在了 DOM 中的 #app 元素上。同时，指定了一个 msg 数据和一个 handleClick 方法，可以在 HTML 中使用。

但是，在某些场景下，我们需要在同一个页面中使用多个 Vue 实例。这时我们就需要使用Vue.extend方法来创建多个实例组件。

var childComponent = Vue.extend({
  template: '<div>{{msg}}</div>',
  data: function() {
    return {
      msg: 'Hello Child Component!'
    }
  }
})
new Vue({
  el: '#app',
  components: {
    childComponent
  }
})

在上面的代码中，我们使用 Vue.extend 方法创建了一个名为 childComponent 的子组件，然后在父组件中使用 components 属性将其引入。在 HTML 中使用 <child-component></child-component>rrreee

Dans le code ci-dessus, nous lions une instance Vue à l'élément #app dans le DOM . En même temps, des données msg et une méthode handleClick sont spécifiées, qui peuvent être utilisées en HTML.

Cependant, dans certains scénarios, nous devons utiliser plusieurs instances Vue dans la même page. À ce stade, nous devons utiliser la méthode Vue.extend pour créer plusieurs composants d'instance. 🎜rrreee🎜Dans le code ci-dessus, nous utilisons la méthode Vue.extend pour créer un composant enfant nommé childComponent, puis utilisons components attribut pour l’introduire. Utilisez simplement la balise <child-component></child-component> en HTML. 🎜🎜En général, la chose la plus fondamentale et la plus importante dans une application Vue est l'instance Vue. Dans la plupart des cas, une application Vue n'aura qu'une seule instance racine de Vue, mais dans certains scénarios, plusieurs instances peuvent coexister. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!