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>