Vue组件通信（传值）

最新推荐文章于 2024-11-12 10:03:33 发布

谢小丹

最新推荐文章于 2024-11-12 10:03:33 发布

阅读量1.4k

点赞数 2

分类专栏： Vue 文章标签： vue 组件传值基础 vuex

本文链接：https://blog.youkuaiyun.com/weixin_43747906/article/details/84981199

版权

本文详细介绍了Vue中组件间的通信方式，包括：1) 父子属性传值，通过props从父组件向子组件传递数据；2) 子父事件传值，子组件通过$emit触发事件改变父组件状态；3) 非父子组件通信，如使用事件总线或Vuex。重点阐述了Vuex的原理和配置，以及如何通过state、mutations、actions和getters管理全局状态。

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

先介绍一下什么是组件把：
创建组件的两种方式：

全局组件

// 组件就是vue的一个拓展实例
 let component=Vue.extend({
   
     data(){
   
       return{
   
         //与vue实例中的data不同，子组件的data必须是一个方法，必须有返回值，且返回值是对象。
         //这样做可以使组件中的数据独立。
         //需要共享数据时可把return的对象声明全局变量
       }
     }
     template:'<div></div>'// 模板  这个组件的html元素
 	// })
    //注册组件
 Vue.component('hehe',component)

（简写）

 Vue.component('组件名',{
   
 		template:''// 模板  
 	})

局部组件

new Vue({
   
 		el:'#app',
 		data:{
   
 			test:11
 		},
 		components:{
   
 			one:{
   
		    	template:'<h1>这里是局部组件 </h1>'
		    }
 		}

 	})

需要注意的是子组件的命名无法识别驼峰命名法，当组件做为标签使用的时候需要用“-”和小写字母替换该大写字母。

<div id="app">
   <one-data></one-data>
</div>
new Vue({
   
 		el:'#app',
 		data:{
   
 			test:11
 		},
 		components:{
   
 			oneData:{
   
		    	template:'<h1>这里是局部组件 </h1>'
		    }
 		}

 	})

1、父子属性传值
子组件不能直接使用父级data的内容，也不能直接修改父组件传递的值，但可以通过设置props属性来获得自身属性值。
原理：

通过子组件的props抛出一个组件标签属性
父组件通过该标签属性将参数传递给子组件
子组件内部通过该标签属性获取值

代码实现：（实现过程中踩过的坑）
1.template标签内必须有且只有一个根元素
2.子组件标签内要通过v-bind的方式绑定父级的data的值
3.子组件通过props定义的自身属性值（test）获取父组件的data中的内容（父组件：{ {name}} ；子组件：{ {test}}）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="base/vue.js"></script>
</head>
<body>
   <div id="myApp">
       {
  {name}}
       <son :test='name'></son>
   </div> 
   <!--实现功能较复杂时，会单独写个template标签，通过id与子组件中的template相关联，否则字符串拼接会很麻烦-->
   <template id="tp">
       <div>{
  {test}}</div>
   </template>
</body>
<script>
    new Vue({
    
        el:'#myApp',
        data:{
    
            name:'加油鸭！'
        },
        components:{
    
            son:{
    
                template:'#tp',//类似于 el
                props:['test']
            }
        }
    })
</script>
</html>

再用全局组件写一个父子属性传值，实现点击父组件按钮，子组件div显示和隐藏

（全局组件无固定父子关系，该组件标签放在哪个标签内就是哪个标签的子组件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>父向子传值</title>
    <script src="base/vue.js"></script>
</head>
<body>
   <div id="myApp">
   <!--c1就是myApp的子组件-->
       <c1></c1>
   </div> 
   <template id="tp1">
       <div>
           <h4>我是c1，是父级</h4>
           <button @click="change">点我c2变</button>
           {
  {state}}
           <hr>
           <!--写在c1的template内，就是c1的子组件-->
           <c2 :changed='state'></c2>
       </div>
   </template>
   <template id="tp2">
       <div>
           我是c2，是子级
           <div v-show='changed'><h1>我是div</h1></div>
        </div

最低0.47元/天解锁文章