vue常用创建组件几种方式总结
最近一周需要使用vue开发一个谷歌扩展插件，但是又不能在vue-cli脚手架中开发，所以只能单独引入vue.js整个包进行脚本植入开发。引入vue.js就代表着不能用import、require之类的引入单文件组件文件，只能在文件中开发，或者多个js文件分先后顺序植入开发，然后就出现了一个尴尬的问题就是，忘记了最原本的其他组件创建的方式，所以记录回顾下：1. 全局注册组件：<!DO.
·
最近一周需要使用vue开发一个谷歌扩展插件，但是又不能在vue-cli脚手架中开发，所以只能单独引入vue.js整个包进行脚本植入开发。引入vue.js就代表着不能用import、require之类的引入单文件组件文件，只能在文件中开发，或者多个js文件分先后顺序植入开发，然后就出现了一个尴尬的问题就是，忘记了最原本的其他组件创建的方式，所以记录回顾下：
1. 全局注册组件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<template id="myComponent">
<div>This is a component!</div>
</template>
</body>
<script src="js/vue.js"></script>
<script>
Vue.component('my-component',{
template: '#myComponent',
data(){
return {}
},
methods: {
}
})
new Vue({
el: '#app'
})
</script>
</html>2. 局部注册组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>局部注册组件</title>
</head>
<body>
<section id="app">
<my-component-a></my-component-a>
<my-component-b></my-component-b>
</section>
<template id="a">
<h1>这是一个A组件</h1>
</template>
<template id="b">
<h2>这是一个B组件</h2>
</template>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
const componentA = {
template: '#a',
data(){
return { }
}
//...
}
const componentB = {
template: '#b',
data(){
return { }
}
//...
}
var vm = new Vue({
el: '#app',
components: {
// 局部注册，my-component-a是标签名称
'my-component-a': componentA,
// 局部注册，my-component-b是标签名称
'my-component-b': componentB
}
})
</script>
</body>
</html>3. 使用x-template引入模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>x-template注册组件</title>
</head>
<body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/x-template" id="checkbox-template">
<div class="checkbox-wrapper" @click="check"> <div :class="{ checkbox: true, checked: checked }"></div> <div class="title"></div> </div>
</script>
<script type="text/javascript">
Vue.component('my-checkbox', {
template: '#checkbox-template',
data() {
return { checked: false, title: 'Check me' } },
methods: {
check() {
this.checked = !this.checked;
}
}
});
</script>
</body>
</html>4. render函数注册组件（ 类似于虚拟DOM的实现 ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>render注册组件</title>
</head>
<body>
<my-checkbox></my-checkbox>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
Vue.component('my-checkbox', {
data() {
return {
checked: false,
title: 'Check me'
}
},
methods: {
check() {
this.checked = !this.checked;
}
},
render(createElement) {
return createElement('div', {
attrs: {
'class': 'checkbox-wrapper'
},
on: {
click: this.check
}
},
[
createElement('div', {
'class': {
checkbox: true,
checked: this.checked
}
}),
createElement('div', {
attrs: {
'class': 'title'
}
}, [this.title] )
]);
}
});
</script>
</body>
</html>5. jsx注册组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsx注册组件</title>
</head>
<body>
<my-checkbox></my-checkbox>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
Vue.component('my-checkbox', {
data() {
return {
checked: false,
title: 'Check me'
}
},
methods: {
check() {
this.checked = !this.checked;
}
},
render() {
return <div class = "checkbox-wrapper"onClick = { this.check}>
<div class = {
{
checkbox: true,
checked: this.checked
}
}></div>
<div class="title">{ this.title }</div>
</div> } });
</script>
</body>
</html>其他组件相关知识点总结：
1. Vue.extend
概述：Vue.extend返回的是一个“扩展实例构造器”，也就是预设了部分选项的Vue的实例构造器，它常常服务于Vue.component用来生成组件，可以简单理解为当在模板中遇到该组件作为标签的自定义元素时，会自动调用“扩展实例构造器”来生产组件实例，并挂在到自定义元素上
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.extend使用</title>
</head>
<body>
<author></author>
<div id="author"></div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
//挂载到标签为author自定义标签上
var author1 = Vue.extend({
template: "<p><a :href='url'>{{author}}</a></p>",
data : function() {
return {
author : 'vamous',
url : 'http://blog.csdn.net/Dear_Mr/article/details/72614370'
}
}
});
new author1().$mount('author');
//使用propsData 挂载到id为author标签上
var author2 = Vue.extend({
template: "<p><a :href='url'>{{author}} & {{name}}</a></p>",
data : function() {
return {
author : 'vamous',
url : 'http://blog.csdn.net/Dear_Mr/article/details/72614370'
}
},
props : ['name']
});
new author2({propsData: {name : 'dear_mr'}}).$mount('#author');
</script>
</body>
</html>2. Vue.extend 和 Vue.component的区别和联系
extend 是构造一个组件的语法器.
你给它参数 他给你一个组件 然后这个组件
你可以作用到Vue.component 这个全局注册方法里， 也可以在任意vue模板里使用car组件
var car = Vue.extend({
//….
})
Vue.component('car',car)你可以作用到vue实例或者某个组件中的components属性中并在内部使用car组件
new Vue({
components:{
car:car
}
})Vue.component 你可以创建 ，也可以取组件 例如下
var car = Vue.component('car')
前往低代码交流专区
更多推荐
5
0- 0
已为社区贡献4条内容
所有评论(0)