Vue组件详解与实践-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42839746/article/details/124657952

本文介绍了Vue.js组件的基础知识，包括组件的定义、使用步骤、数据管理以及组件间的通信。强调了data选项必须为函数以确保组件实例的独立性，并详细讲解了props实现父组件向子组件传值以及子组件如何通过事件向父组件传值的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Vue组件概述

1、组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

2、在大型的应用中为了分工、代码复用、提高维护性不可避免地需要将应用抽象为多个相对独立的模块。

二、组件的使用分三个步骤

1、调用 Vue.extend() 方法创建组件构造器

var MyComponent = Vue.extend({ 
    // 选项
})

2、调用 Vue.component() 方法注册组件。

Vue.component('my-component', MyComponent)

3、在 Vue 实例的作用范围使用组件。

<div id="app"> 
    <my-component></my-component> 
</div>

完整代码（第一种写法）

<!DOCTYPE html>
<html>
<head>
	<title>使用组件</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
   <div id="app">
   	    <!-- 3、 #app 是 Vue 实例挂载的元素，应该在挂载元素范围内使用组件--> 
   		<my-component></my-component>
   </div>
</body>
<script type="text/javascript">
	// 1、创建一个组件构造器 
	var Mycomponent=Vue.extend({
		//template选项，他是定义组件的网页模板
		template:"<div><p>组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。</div></p>"
	})
	// 2、创建组件，并指定组件的标签，组件的 HTML 标签为<my-component> 
	Vue.component("my-component",Mycomponent)
	new Vue({
		el:"#app"
	})
</script>
</html>

第二种写法（第一种写法里面组件template 的网页模板html代码不会提示，但是第二种写法会有提示）

<!-- 组件的使用----第二种写法 -->
<!DOCTYPE html>
<html>
<head>
	<title>使用组件</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
   <div id="app">
   	    <!-- 3、 #app 是 Vue 实例挂载的元素，应该在挂载元素范围内使用组件-->
   		<my-component></my-component>
   </div>
   <!-- 2、创建组件，并指定组件的标签，组件的 HTML 标签为<my-component>  -->
   <template id="mytemplate">
   		<div><p>组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。</p></div><!-- template选项，他是定义组件的网页模板，即封装的html网页模板 -->
   </template>
</body>
<script type="text/javascript">
	// 1、创建一个组件构造器
	Vue.component("my-component",{
		//template选项，他是定义组件的网页模板
		template:"#mytemplate"
	})
	new Vue({
		el:"#app"
	})
</script>
</html>

注意：组件中的 data选项 必须是函数。

因为一个组件可以在多处复用，如果 data 是一个对象，那么所有复用的组件实例将都显示相同内容，如此就限制了组件复用的意义。

<!DOCTYPE html>
<html>
<head>
	<title>使用组件之data必须写成函数</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
   <div id="app">
   	 <ul>
   	 	<li-component></li-component><!-- template定义组件的网页模板在这里渲染出来 -->
   	 </ul>
   </div>
   <template id="mytemplate">
   	 <li>负责人：{{name}},项目详情：{{pro}},状态：<span style="color: red">{{status}}</span></li><!-- 这是定义的组件网页模板 -->
   </template>
</body>
<script type="text/javascript">
	Vue.component("li-component",{
		//template选项 ，他是定义组件的网页模板
		template:"#mytemplate",
		//data:组件中的data,保存数据的,一定要写成函数形式
		data:{
				name:"欧鹏翔",
				pro:"卖核弹的小男孩",
				status:"开发中..."
		},
	})
	new Vue({
		el:"#app",
	})
</script>
</html>

我没有把上面代码的data写成函数，因此Vue在控制台发出警告

所以我们要把data写成函数形式，并用return返回

data(){
	return{
		name:"欧鹏翔",
		pro:"卖核弹的小男孩",
		status:"开发中..."
	}
},

三、组件嵌套

1、组件本身也可以包含组件（例如父组件包含着子组件）

<!DOCTYPE html>
<html>
<head>
  <title>组件嵌套之父子组件</title>
  <meta charset="utf-8">
  <script type="text/javascript" src="lib/vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- 4、 #app 是 Vue 实例挂载的元素，应该在挂载元素范围内使用组件 -->
    <father-component></father-component>
  </div>
</body>
   <script type="text/javascript">

    // 2、创建儿子组件
    var child = Vue.extend({
      template: '<div style="color:red">我是儿子组件!</div>' 
    }); 

    // 3、创建父亲组件,并 components方法 将儿子组件嵌套入父亲组件里
    var Father = Vue.extend({
      template: '<div >我是父亲组件 <child-component></child-component></div>', 
      components: { 
        'child-component': child 
      } 
    });

    // 1、创建一个组件构造器
    Vue.component("father-component", Father);
    new Vue({
      el:"#app",
    })
   </script>
</html>

四、父子组件之间的通信（传值）

1、使用 props 属性父组件向子组件传值可以使用如下代码：

<child-component v-bind:子组件属性="父组件数据属性"></child-component>

完整代码

<!DOCTYPE html>
<html>
<head>
	<title>父子组件之间的通信</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
	<div id="app">
   		<ul-component></ul-component>
	</div>

	<!-- 子组件的标签可以放在父组件的网页模板 -->
	<template id="father-template">
   	<div>
   		<ul>
   			<!-- myname  mypro  mystatus是我们在子组件用props定义的三个自定义属性，然后通过绑定父组件data中的数据，完成父组件发送数据给子组件的过程 -->
   			<!-- 语法：<child-component v-bind:子组件属性="父组件数据属性"></child-component>  v-bind数据绑定  -->
   			<child-component v-bind:myname="name" v-bind:mypro="pro" v-bind:mystatus="status"></child-component>
   		</ul>
   	</div>
	</template>

	<template id="child-template">
   		<li>负责人:{{myname}},项目详情:{{mypro}},状态：<span style="color:red">{{mystatus}}</span></li>
	</template>
</body>
<script type="text/javascript">

	//1、创建父亲组件,在data中写入数据
	Vue.component("ul-component",{

		template:"#father-template",
		data(){
			return{
				name:"欧鹏翔",
				pro:"人类心理学——联合狩猎",
				status:"开发中..."
			}
		},

		//2、创建子组件，有一个components选项可以来定义子组件
		components:{
			'child-component':{
				//3、components以下的就是子组件
				//说明:child-component是子组件的标签名,child-component的{}就是子组件对象
				template:"#child-template",
				//pros:定义子组件的自定义属性
				props:['myname','mypro','mystatus']
			}
		}
	})

	new Vue({
		el:"#app",
	})
</script>
</html>

2、父亲传值给儿子组件

父传子步骤：

①要在子组件声明props接受数据，自定义名字（abc）

②在父组件挂载子组件，用:abc = 父组件的数据(name)

完整代码

<!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>父传值给子组件</title>
</head>
<body>
    <script src="lib/vue.js"></script>

    <div id="app">
        <App />
    </div>

    <script>
        /*
            父传子步骤：
                1、要在子组件声明props接受数据，自定义名字abc
                2、在父组件挂载子组件，用:abc = 父组件的数据(name)
        */
        //子组件        v-for="(item,index) in post"   (item,index)里面每一项的下标，in post(来源于数组post)
        var vcontent = {
            template: `
                 <div>
                    <p>{{abc}}</p>
                    <ul>
                        <li v-for="(item,index) in post">
                            <h3>{{item.title}}</h3>
                            <h3>{{item.content}}</h3>
                        </li>
                    </ul>
                 </div>`,
            props: ['abc', 'post'],//父传子的数据必须用props定义
        }
        //父组件    声子,并在new Vue({})里挂子
        var App = {    // :abc="name"中的abc数据来源于name   :post="post"中的:post数据来源于下面的pops数组
            template: `
                <div>
                    <vcontent :abc="name" :post="post"></vcontent>
                </div>`,
            data() {
                return {
                    name: '卖核能的小男孩',
                    post: [
                        { id: 1, title: "我的第一个游戏", content: "亡者农药" },
                        { id: 2, title: "我的第二个游戏", content: "和平精英" },
                        { id: 1, title: "我的第三个游戏", content: "人类心理学" }
                    ]
                }
            },
            
            components: {
                vcontent    // 将子组件写在外面,components方法挂载进来
            }
        }

        new Vue({
            el: '#app',
            components: {
                App     //挂子
            }
        })
    </script>

</body>
</html>

3、儿子组件传值给父亲组件

父传子步骤：

①要在子组件声明一个方法去调用事件，然后用$emit调用事件作为第一个参数，第一个参数注意用双引号，第二个参数就是传入的值，一般通过this来调用

②在父组件挂载子组件，通过 @事件名=父组件方法名，在方法里面可以用传入值去赋值

完整代码

<!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>子传值给父组件</title>
</head>

<body>

    <script src="lib/vue.js"></script>

    <div id="app">
        <parent />
    </div>

    <template id="child">
        <div>
            <button @click="click1">传值</button>
            <input type="text" v-model="message">
        </div>
    </template>
    <script>
        /*
            子传父步骤：
                1、要在子组件声明一个方法去调用事件，然后用$emit调用事件作为第一个参数，第一个参数注意用双引号
                   第二个参数就是传入的值，一般通过this来调用
                2、在父组件挂载子组件，通过  @事件名=父组件方法名，在方法里面可以用传入值去赋值
        */
        //子组件
        var child = {
            template: '#child',
            data() {
                return {
                    message: "我是子组件的内容"
                }
            },
            methods: {
                click1() {  //上面按钮（传值）的监听事件方法
                    this.$emit('childfn', this.message)  // 用$emit调用事件作为第一个参数，第一个参数注意用双引号
                }
            }
        }

        //父组件      声子,并在new Vue({})里挂子
        var parent = {  // 在父组件挂载子组件，通过  @事件名=父组件方法名，在方法里面可以用传入值去赋值
            template: `<div>
                        <child @childfn = "changetext"></child>
                        子组件传来的值:{{message2}}
                      </div>`,
            data() {
                return {
                    message2: ''  // 不写入内容的话,页面 子组件传来的  值显示空白
                }
            },
            methods: {
                changetext(msg) {
                    this.message2 = msg
                }
            },
            components: {
                child    // 将子组件写在外面,components方法挂载进来
            }
        }

        new Vue({
            el: '#app',
            components: {
                parent     //挂子
            }
        })
    </script>
</body>

</html>

Vue组件基础