Heim > Artikel > Web-Frontend > Eine kurze Analyse verschiedener Möglichkeiten zum Erstellen von Komponenten in Vue
Das Erstellen von Vue-Komponenten besteht darin, die Codemenge von Vue-Instanzen aufzuteilen und verschiedene Funktionen über verschiedene Komponenten zu finden. Hier sind drei Möglichkeiten, Komponenten in Vue zu erstellen. Freunde in Not können darauf verweisen.
Methode 1: Verwenden Sie Vue.extend, um eine globale Vue-Komponente zu erstellen.
Instanz:
var com1 = Vue.extend({ template: '<h3>这是使用 Vue.extend 创建的组件</h3>' // 通过 template 属性,指定了组件要展示的HTML结构 })
Verwenden Sie Vue.component
('组件名称', 创建的组件对象)来创建vue组件的时候,名称使用首字母大写来命名,引用组件时,将大写的改为小写字母,两个单词之前使用 -
连接;参数一:一个标签形式来引入组件的,参数二:template
就是组件展示的HTML
Inhalt.
<div id="app"> <!-- 如果要使用组件,直接,把组件的名称,以 HTML 标签的形式,引入到页面中,即可 --> <mycom1></mycom1> </div> <script> Vue.component('mycom1', Vue.extend({ template: '<h3>这是使用 Vue.extend 创建的组件</h3>' })) // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: {}, }); </script>
Das erhaltene Ergebnis ist:
Methode 2: Vue.component direkt verwenden
<body> <div id="app"> <!-- 使用标签形式,引入自己的组件 --> <mycom2></mycom2> </div> <script> Vue.component('mycom2', { template:`<div> <h3>这是直接使用 Vue.component 创建出来的组件</h3> <span>123</span> </div> ` }) // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {} }); </script> </body>
Das Ergebnis:
Methode 3: Vue.component außerhalb der kontrollierten #App verwenden die Vorlagenelement
Außerhalb der kontrollierten #App verwenden Sie das Vorlagenelement, um die HTML-Vorlagenstruktur der Komponente zu definieren
<body> <div id="app2"> <login></login> <mycom3></mycom3> <login></login> </div> <template id="tmpl"> <div> <h1>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮</h1> <h4>好用,不错!</h4> </div> </template> <template id="tmpl2"> <h1>这是私有的 login 组件</h1> </template> <script> Vue.component('mycom3', { template: '#tmpl', }) // 创建 Vue 实例,得到 ViewModel var vm2 = new Vue({ el: '#app2', data: {}, methods: {}, filters: {}, directives: {}, components: { // 定义实例内部私有组件的 login: { template: '#tmpl2' } }, }) </script> </body>
Ausgabeergebnis:
Hinweis: Egal, wie die Komponente erstellt wird, die Komponente Der Inhalt, auf den die Vorlage verweist, hat ein und nur ein Stammelement.
Verwandte Empfehlungen: „vue.js Tutorial“
Das obige ist der detaillierte Inhalt vonEine kurze Analyse verschiedener Möglichkeiten zum Erstellen von Komponenten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!