vuejs定义组件的几种方法

特别声明，本文转载@茄子翻译@ANTHONYGORE的《7 Ways To Define A Component Template in Vue.js》一文，如需转载，烦请注明原文出处：

英文：https://vuejsdevelopers.com/2017/03/24/vue-js-component-templates

译文：https://laravel-china.org/articles/4382/seven-ways-to-define-a-component-template-by-vuejs

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/vue/seven-ways-to-define-a-component-template-by-vuejs.html © w3cplus.com

定义组件的7种方法：

l  字符串

l  模板字面量

l  x-template

l  内联模板

l  render 函数

l  JSF

l  单文件组件

 

（1）字符串

这是最基础的一种方式

Vue.component('组件名',{

       template:‘字符串（html）’})

（2）模板字符串（反引号方式），阅读体验佳，在许多浏览器中支持，不过安全起见还是需要把代码转换成ES5。这种方式并不完美，IDE仍然会通过语法高亮、tab格式化、换行符等地方的问题折磨你。

Vue.component('组件名',{

       template:`字符串（html）`})

（3）x-template

模板需定义在script标签里，给该script标签加上type="text/x-template"和给一个id值，引用的方式是在定义组件时直接引用该script标签的id值。此方法允许你使用适当的html标记编辑你的html，不足在于把模板和组件定义的其他部分分离开了

<scriptid='my-component' type='text/x-template'>组件内容</script>

Vue.component('组件名',{template: '#my-component' )

（4）内联模板

需在组件中添加inline-template属性，在Vue内指示内容是其模板。这种方式与x-template具有相同的缺点，优点是模板内容在html的位置，因此可以在页面加载时渲染，而不用等到JavaScript运行时再渲染

Vue.component('my-component(组件名)',{data():{}....} )

<my-componentinline-template>模板内容</my-component>

（5）render函数

render函数需要你将模板定义为JavaScript对象，这显然是最详细和抽象的模板选项

优点是你的模板更接近编译器，允许你使用完整的JavaScript功能，而不是指令提供的子集

Vue.component('my-component(组件名)',{

render(createElement){

   return createElement(

'div',{

attrs:{'class':'类名'}，on:{click:this.函数名（此处函数在组件的method定义）}}，

[createElement('div',{'class':'样式或类名'})，createElement('div',{'class':'样式'})]

)}} )

（6）JSX

Vue 中最有争议的模板选项是 JSX，一些开发者认为它丑陋、不直观，是对 Vue 精神的背叛。JSX 需要你先编译，因为它不能被浏览器运行。

不过，如果你需要完整的 JavaScript 语言功能，又不太适应 render 函数过于抽象的写法，那么 JSX 是一种折衷的方式。

Vue.component('组件名',{

    render(){

       return <div>....组件内容</div>

}})

（7）单文件组件

只要你把构建工具设置的很棒，单文件组件就是模板选项中的王者。它允许你写 HTML 标签定义组件，并且将所有组件定义保留在一个文件中。

尽管它也有一些劣势：需要预编译，某些 IDE 不支持 .vue 文件的语法，不过其地位依然难以被撼动。

文件命名：XXX.vue

<template>组件内容</template>

<script>

   export  default{

        data(){return{...}},

       methods:{...}   ...}

</script>

（8）创建子组件

      在组件内部利用children创建