vue常用创建组件几种方式总结

最新推荐文章于 2024-05-24 19:38:57 发布

荔枝1

最新推荐文章于 2024-05-24 19:38:57 发布

阅读量450

点赞数

分类专栏： Vue

原文链接：https://blog.csdn.net/WU5229485/article/details/82908068

版权

Vue 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

最近一周需要使用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(). $KaTeX parse error: Expected '}', got '&' at position 956: \dots"hljs-string">"&̲lt;p><a :\dots$ 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’)

荔枝1

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue常用创建组件几种方式总结

最近一周需要使用vue开发一个谷歌扩展插件，但是又不能在vue-cli脚手架中开发，所以只能单独引入vue.js整个包进行脚本植入开发。引入vue.js就代表着不能用import、require之类的引入单文件组件文件，只能在文件中开发，或者多个js文件分先后顺序植入开发，然后就出现了一个尴尬的问题就是，忘记...
复制链接

扫一扫