【Vue3】Vue的组件

早睡早起长头发

已于 2023-01-05 12:42:50 修改

阅读量494

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2022-08-16 21:12:14 首次发布

本文链接：https://blog.csdn.net/weixin_51481135/article/details/126374390

版权

Vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了Vue.js中组件的创建过程，包括定义数据和方法，创建模板，以及注册组件。同时，讲解了如何在Vue.js中创建子组件，并展示了如何通过props传递外部属性。此外，还阐述了两种不同的方法来处理组件间的事件传递，分别是直接通过$emit调用父组件方法和通过子组件方法触发$emit。这些内容对于理解和掌握Vue.js组件化开发至关重要。

摘要由CSDN通过智能技术生成

一、组件的创建

1.创建组件的模板

const obj = {    
			  data(){
			     return {
				  }
			  },
			  methods: {
			  }
		      template: `模板字符串`  //组件的视图
		  }

2.注册组件

App.component(“标识名”,组件对象)

  App.component("my-obj",obj);

Vue创建子组件的方法:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app">
        <!-- 可以将创建的组件当作标签使用 -->
        <my-alert></my-alert>
    </div>
    <script>
        const App = Vue.createApp({}) // 1.创建一个空的Vue主组件
        
        // 2.这个是个对象，也是子组件的一个模板
        const alertComonent = {
            // 显示数据
            data() {
                return {
                    msg: '警告框提示',
                    count: 0
                }
            },
            // 显示方法
            methods: {
                click() {
                    alert(this.msg + this.count++)
                }
            },
            // 显示子组件在页面的视图
            template: `<div><button @click='click'>按钮</button></div>`

        // 3.创建子组件
        App.component('my-alert', alertComonent)//给子组件重新命名个名字为my-alert
        App.mount('#app')//将APP组件挂载到app上
    </script>
</body>

</html>

二、组件中数据和事件的传递

1.给组件添加外部属性

在组件的对象模板中使用props来定义组件的外部属性。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app">
        <!-- 可以将创建的组件当作标签使用 -->
        <my-alert title="登录"></my-alert>
        <br>
        <my-alert title="注册"></my-alert>
    </div>
    <script>
        const App = Vue.createApp({}) // 1.创建一个空的Vue主组件
        
        // 2.这个是个对象，也是子组件的一个模板
        const alertComonent = {
            // 显示数据
            data() {
                return {
                    msg: '警告框提示',
                    count: 0
                }
            },
            // 显示方法
            methods: {
                click() {
                    alert(this.msg + this.count++)
                }
            },
            props:["title"],//给组件添加外部属性
            // 显示子组件在页面的视图
            template: `<div><button @click="click">{{ title }}</button></div>`
        }

        // 3.创建子组件
        App.component('my-alert', alertComonent)//给子组件重新命名个名字为my-alert
        App.mount('#app')//将APP组件挂载到app上
    </script>
</body>

</html>

2.处理组件事件

在子组件中调用外部组件的方法(使用$emit来实现)。

有两种写法（可以达到相同的目的）：

方法一：单击子组件视图按钮，子组件直接通过$emit调用外部组件方法,来进行传参。

注意：子组件的方法myclick要和@myclick的名字要一样，才能调用父组件的appfunc方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script src="https://unpkg.com/vue@next"></script>

</head>

<body>
    <div id="main">
        <my-com1 title="按钮1" @myclick="appfunc"></my-com1>
    </div>
    <script>
        // 将一个对象定义到函数中传
        const App = Vue.createApp({
            methods:{
                appfunc(param){
                    console.log('点击了自定义组件,参数是：'+param)
                }
            }
        })
        const com1 = {
            props:['title'],
            // 给子组件的Button绑定了一个事件$emit，传了myclick（和@myclick="appfunc"保持一致）和title)
            // 当在子组件（按钮）上单击时，触发click事件，调用$emit事件触发myclick事件，调用父组件App的appfunc方法，将参数title)传入appfunc
            template:`<div><button @click = "$emit('myclick',title)">{{title}}</button></div>`
        }
        // 将com1注册到App中
        App.component("my-com1",com1)
        // 挂载
        App.mount('#main')
    </script>
</body>

</html>

方法二：单击子组件视图按钮，触发click事件，调用子组件sonClick的方法，来进行传参。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script src="https://unpkg.com/vue@next"></script>

</head>

<body>
    <div id="main">
        <my-com1 title="按钮1" @myclick="appfunc"></my-com1>
    </div>
    <script>
        const App = Vue.createApp({
            methods:{
                appfunc(param){
                    console.log('点击了自定义组件,参数是：'+param)
                }
            }
        })
        const com1 = {
            props:['title'],
            methods:{
                sonClick(){
                    this.$emit('myclick',this.title)
                }
            },
            // 单击子组件的button，触发click事件调用sonClick，通过$emit事件触发myclick，调用父组件App中的appfunc方法
            template:`<div><button @click = "sonClick">{{title}}</button></div>`
        }
        App.component("my-com1",com1)
        App.mount('#main')
    </script>
</body>

</html>