组件间的通信（包括注册组件和组件间的传值）

最新推荐文章于 2024-06-28 18:39:53 发布

不染126

最新推荐文章于 2024-06-28 18:39:53 发布

阅读量174

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_59541478/article/details/127099106

版权

组件分为两种注册方式：局部注册和全局注册

1.首先讲一下全局注册组件

全局注册的组件可以在任意组件里面使用，如果在很多个组件里面都要使用到该组件，那我们就用全局注册的方式，大体就是三个步骤：1.定义一个组件配置对象 2.对组件进行全局注册 3.使用组件。下面我们通过案例来描述过程，案例中在B组件里使用A组件就是为了说明全局注册的组件可以在组件里面使用

<!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://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>

</head>
<body>
	<div id="app">
		<!-- 3.组件使用 -->
		<my-a></my-a>
		<my-b></my-b>
	</div>
	<script>
		// 1.定义组件配置对象
		let myA={
			template:`
				<div>
					{{msgA}}
				</div>
			`,
			data(){
				return {
					msgA:'我是子组件'
				}
			}
		};
		let myB={
			template:`
				<div>B组件
					------------------
					<my-a></my-a>
				</div>
			`
		}
		// 2.注册组件
			// 1.全局注册 --任意组件里面使用
		Vue.component('my-a',myA);
		Vue.component('my-b',myB);
		new Vue({
			el:"#app",
			data:{
				msg:'我是父组件'
			},
			methods:{

			}
		})
	</script>
</body>
</html>

2.局部注册组件

只能在组件内部使用，如果只在某一个组件里面使用就用局部注册

<!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://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<my-a></my-a>
		<my-b></my-b>
	</div>
	<script>
		// 1.定义组件配置对象
		let myA={
			template:`
				<div>
					{{msgA}}
				</div>
			`,
			data(){
				return {
					msgA:'我是子组件'
				}
			}
		};
		let myB={
			components:{
				'my-a':myA
			},
			template:`
				<div>B组件
					------------------
					<my-a></my-a>
				</div>
			`
		}
		
		new Vue({
			// 2.局部注册 --只能在根组件使用
			components:{
				'my-a':myA,
				'my-b':myB
			},
			el:"#app",
			data:{
				msg:'我是父组件'
			},
			methods:{

			}
		})
	</script>
</body>
</html>

3.父组件给子组件传值

子组件可以对父组件传来的值进行校验，在子组件标签行写入传递的值，用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://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-a msg1="msg"></my-a>
        
    </div>
    <script>
        let myA = {
            
                props:['msg1','msg','stu','age','obj'],
           
                }
               
            },
            template: `
				<div>
					我是子组件
					{{sub1}}--{{typeof sub1}}
					{{sub}}--{{typeof sub}}
					{{age}}--{{typeof age}}
					{{stu}}--{{typeof stu}}
					{{msg}}
				</div>
			`,
            data() {
                return {

                }
            },
        };
        new Vue({
            components: {
                'my-a': myA
            },
            el: "#app",
            data: {
                msg: '我是父组件'
            }
        })
    </script>
</body>

</html>

4.子组件给父组件传值

子组件内用自定义发射事件$emit（'发射事件名称',‘传递的参数’）来发射数据，父组件声明自定义函数接收参数

<!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://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<!-- 2.在父组件使用子组件得标签定义自定义事件 -->
		<my-a @my-event="handler"></my-a>
	</div>
	<script>
		let myA={
			template:`
				<div>
					我是子组件
					<button @click='toSend'>子传值给父</button>
				</div>
			`,
			data(){
				return {
					subMsg:'我是子组件A --我要给父组件传值'
				}
			},
			methods:{
				toSend(){
					// 1.子组件发射自定义事件通过emit
						// this.$emit(事件名称,传递得值)
					this.$emit('my-event',this.subMsg)
				}
			}
		};
		new Vue({
			components:{
				'my-a':myA
			},
			el:"#app",
			data:{
				msg:'我是父组件'
			},
			methods:{
				handler(a){
					console.log(a,'这是子组件得值');
				}
			}
		})
	</script>
</body>
</html>