Vue 创建新的组件components

Vue组件化应用构建

在Vue的导出模板中创建新的组件，可以将新的组件封装在一个单独的文件中，方便后续组件的重复使用。

Vue中的组件是一种可复用的代码块，可以封装HTML、CSS和JavaScript代码，使得代码更加模块化和可维护。

在Vue中，组件可以通过Vue.component()方法来注册，方法的第一个参数是组件的名称，第二个参数是一个选项对象，其中包含组件的属性、方法和生命周期钩子等。

在使用组件时，可以在模板中使用组件的标签名来引用组件，就像使用HTML标签一样。例如，如果注册了一个名为"my-component"的组件，可以在模板中使用""来引用该组件。组件可以接受父组件传递的数据，可以使用props选项来声明组件的属性，父组件可以通过这些属性向子组件传递数据。组件还可以使用事件来与父组件进行通信，可以使用$emit()方法触发一个自定义事件，父组件可以使用v-on指令监听这个事件。总之，Vue的组件是Vue应用程序的基本构建块，可以使得应用程序更加模块化、可维护和可复用。

一、VS code 代码

1、新建文件

我们在启动服务的文件夹目录下 新建一个命名为 Mycomponent.vue的文件。
我的路径：E:\Demo\my-project\src\MyComponent.vue

2、定义组件

我们已经新建了一个名为MyComponent.vue的文件，现在我们要在其中定义一个组件：
MyComponent.vue

<template>
    <div>
      <button @click="onClick()">点击按钮事件</button>
    </div>
  </template>
  
  <script>
    export default {
        name: 'MyComponent',
        methods:{
          onClick(){   //定义了一个名为"onClick"的方法，用来处理按钮点击事件。当用户点击按钮时，Vue会自动调用这个方法。
            alert('一些提示------！')
          }
        },
    }
  </script>

上述代码中，我们创建了一个新的组件，并在组件的模板中添加了一个按钮点击事件来渲染内容。

3、导入组件

一旦将新的组件"MyComponent"添加到了Vue实例中，我们就可以在页面中使用它了（即：定义好组件，就可以在其它组件中使用它）。当然，要使用组件，前提是要将其导入到我们的组件当中。
App.vue

<!-- 在模板中使用标签来渲染组件 -->
<template>
  <div>
    <my-component></my-component>			// 创建一个 my-component 组件的实例
  </div>
 </template>

<script>
import MyComponent from './MyComponent.vue';	// 将外面的组件导入到该组件中

export default {
  name: 'App',
  components: {						// 在components选项中注册它
    'my-component':MyComponent
  }
}
</script>

注：components切记末尾要加"s"，同methods

4、预览

二、HBuilder 代码

<div id="seg1">
	<alert></alert>
</div>
<div id="seg2">
	<Alt></Alt>
</div>

1、写法一

<script>
	// 创建Vue组件 在Vue中，组件可以通过Vue.component()方法来注册。
	// 第一个参数：组件名称	第二个参数：选项对象，包含组件的属性、方法等。
	
	Vue.component('alert',{
		template: '<button @click="onClick">创建组件1</button>',
		methods:{
			onClick:function(){
				alert('创建组件,弹出对话框');
			}
		}
	})
		
	// 指明一个域
	new Vue({
		el:'#seg1',			
	});
	
</script>

2、写法二

<script>
	// 封装写法
	
	var alert_component={				
		template: '<button @click="onClick">创建组件按钮2</button>',
		methods:{
			onClick:function(){
				alert('创建组件,弹出对话框');
			}
		}				
	}
	
	new Vue({
		el:'#seg2',	
		components:{
				Alt:alert_component
			}
	})

</script>

3、预览