Vue组件的三种创建方式

最新推荐文章于 2024-06-29 16:24:25 发布

lidexi01

最新推荐文章于 2024-06-29 16:24:25 发布

阅读量806

点赞数

分类专栏： Vue 文章标签： vue js html

本文链接：https://blog.csdn.net/president_/article/details/106538139

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue组件的三种创建方式

Vue组件总共有三种创建方式，分别为全局注册组件、局部注册组件和外部文件注册组件。

全局注册组件
在js代码中通过Vue.component对新的组件进行注册，并设置组件名称、属性、数据、模板和一些组件触发时间等。例子如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button-count title="title1" vuesize="50" @clicked="clicked"></button-count>
		
			<h1> hello</h1>
			<button-count title="title2" vuesize="50"></button-count>
		</div>
	</body>

	<script type="text/javascript">
		// 全局注册组件
		Vue.component("button-count", {
			props: ["title", "vuesize"],
			data: function() {
				return {
					count: 0
				}
			},
			// <slot></slot>组件插槽，可以在此处任意添加元素或元素
			template: '<div><h1> hhhh</h1><button v-on:click="click">{{title}}:{{vuesize}}:被点击了{{count}}次</button></div>',
			methods: {
				click: function(){
					this.count++;
					//$emit可以触发另一个事件，参数为要触发的事件名称和要传递的参数
					this.$emit('clicked',this.count);
				}
			}
		});
		var vm = new Vue({
			el: '#app',
			data: {

			},
			methods: {
				clicked: function(e){
					console.log("adb"+e);
				}
			}
		});
	</script>

</html>

运行结果：
在这里插入图片描述

局部注册组件
在Vue实例里添加Components属性即可，例子如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
		
			<test></test>
			<h1> hello</h1>
			
		</div>
	</body>

	<script type="text/javascript">

		var vm = new Vue({
			el: '#app',
			data: {

			},
			methods: {
				clicked: function(e){
					console.log("adb"+e);
				}
			},
			// 局部注册组件
			components:{
				test:{
					template: '<h1>ddd</h1>'
				},
			}
		});
	</script>

</html>

运行结果：
在这里插入图片描述
3. 引用外部文件组件

在外部文件中创建test.vue文件，主要包括template、script和style标签，定义组件的模板、属性动作以及样式等信息。

<template>
	<h1 class="red">{{msg}}</h1>
</template>

<script>
	export default{
		name: 'test',
		props: {
			msg: {
				type: String,
				default: 'test_msg'
			}
		},
		methods: {
			
		},
		data() {
			return{
				
			}
		}
	}
</script>

<style>
	.red{
		color: red;
	}
</style>

在内部文件中使用import导入外部文件的组件就能使用该组件。

<template>
  <div id="app">
	<test></test>
  </div>
</template>

<script>
import test from './components/test.vue'

export default {
  name: 'App',
  components: {
	test
  }
}
</script>

运行结果：
在这里插入图片描述

lidexi01

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue组件的三种创建方式

Vue组件的三种创建方式Vue组件总共有三种创建方式，分别为全局注册组件、局部注册组件和外部文件注册组件。全局注册组件在js代码中通过Vue.component对新的组件进行注册，并设置组件名称、属性、数据、模板和一些组件触发时间等。例子如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src=
复制链接

扫一扫

专栏目录