vue 组件传参

最新推荐文章于 2024-05-18 21:15:09 发布

小涛涛啊！

最新推荐文章于 2024-05-18 21:15:09 发布

阅读量207

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/t5555666/article/details/109015643

版权

vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

组件传参

路由组件传参

我们通常把路由直接映射（绑定）的组件称为路由组件，也只有路由组件才能直接调用路由有关对象：$router、$route

当我们一个组件即希望作为路由组件使用，又可能作为功能组件（某个页面中的一部分）去使用，这个时候路由组件传参的方式来做到这点

*1.父组件向子组件传递参数（还可以传递函数） ====》props*

父组件通过自定义属性的方式传给子组件(:parentmsg=”msg”)，子组件用props接受(props:[“parentmsg”])

   <ahead :foo="mag"></ahead>
	        
	        new Vue({   //父组件
				el:"#box1",
				data:{
					mag:"首页"
				}
			})
			
			Vue.component("ahead",{   //子组件
				props:["foo"],//{}
				template:`<div>
							   <span><</span>
								<i>{{foo}}</i>
								<u>+</u>
						  </div>`
			})

https://segmentfault.com/q/1010000017479096

如果你想看到错误，你要用vue的非压缩版

Vue.component("example", {
				 props: {
				  // 基础类型检测, null意味着任何类型都行
				  propA: Number,
				  // 多种类型
				  propB: [String, Number],
				  // 必传且是String
				  propC: {
				   type: String,
				   required: true
				  },
				  // 数字有默认值
				  propD: {
				   type: Number,
				   default: 101
				  },
				  // 数组、默认值是一个工厂函数返回对象
				  propE: {
				   type: Object,
				   default: function() {
				    console.log("propE default invoked.");
				    return { message: "I am from propE." };
				   }
				  },
				  // 自定义验证函数
				  propF: {
				   isValid（validator）: function(value) {、
				    return value > 100;
				   }
				  }
				 }
				});

2.子组件向父组件传递参数（还可以传递函数）===》$emit/自定义事件方式

事件绑定机制：父组件通过自定义事件的方式向子组件传递方法（@mymsg=“show”），子组件用this. $e m i t () 接受 (t h i s .$ emit(fun,参数1，参数2))，参数可以是子组件的，顺便传给父组件，实现子组件向父组件传值

       <aaa @mymsg="get"></aaa>
	         
	         //子组件
	         var a={
					 data(){
							return {
								msg:"子组件数据"
							}
						},
						methods:{
							send(){
								this.$emit('mymsg', this.msg,this.msg2);
							}
						},
						template:`<div>
									<h1>子组件</h1>	
									<input type="button" @click="send()" value="send"/>
								</div>`
					}
				}
			
			
			//父组件
	         new Vue({
				el:"#box",
				data:{
					msg:"hello",
					msg2:"world"
				},
				methods:{
					show(m){
						alert(m);
						this.msg2=m;
					}
				},
				components:{
					aaa:a
}
			})

3.组件之间相互传参原生事件法

var Event=new Vue();
	    Event.$emit(自定义事件名，参数1，参数2...)  发送参数
Event.$on(自定义事件名,()=>{})  接收参数

         全局：
var Event=new Vue();

组件1：
methods:{
			   send(){
						Event.$emit("mymsgone",this.msgone);
					}
			},

      组件2：methods:{
					send(){
						Event.$emit("mymsgtwo",this.msgtwo);
					}
				},

组件3：
            mounted(){//created(){
					Event.$on("mymsgone",(one)=>{
						console.log(this);
						this.getone=one;
					})

                //console.log(this);
					Event.$on("mymsgtwo",function(two){
						console.log(this);
						this.gettwo=two;
					}.bind(this));					
				},

    4.$parent 获取父元素的数据/方法
      $root    获取根组件的数据/方法
      $children  获取子元素的数据/方法(mounted钩子函数，要有下标）
      $refs      获取子组件的方法和数据/作用2：获取DOM元素
  （一定要使用 ref属性）

  <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ahead ref="one"  @click.native="show"></ahead>
			<hr />
			<h1>内容</h1>
			<button @click="getchild">获取子元素</button>
		</div>
		
		<template id="head">
			<div>
				<h1>{{msgh}}</h1>
				{{numh}}
				<button @click="getfar">获取父元素</button>
			</div>
		</template>
		
		<script>
			var ahead={
				data(){
					return{
						msgh:"hahaha,我是头",
						numh:""
					}
				},
				methods:{
					getfar(){
						//console.log(this.$parent.num);
						this.numh=this.$parent.num;
						this.$parent.show();
						
						console.log(this.$root);
						console.log(this.$parent);
					}
				},
				template:"#head"
			}
			var vm=new Vue({
				el:"#app",
				data:{
					num:100,
					arr:[1,2,3,4,5,6],
					str:"hello"
				},
				methods:{
					show(){
						alert("我是父组件");
					},
					getchild(){
						//console.log(this.$children[0].msgh);
						console.log(this.$refs.one);
					}
				},
				components:{
					ahead
				}
			})
		</script>
	</body>
</html>

小涛涛啊！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 组件传参

组件传参路由组件传参我们通常把路由直接映射（绑定）的组件称为路由组件，也只有路由组件才能直接调用路由有关对象：$router、$route当我们一个组件即希望作为路由组件使用，又可能作为功能组件（某个页面中的一部分）去使用，这个时候路由组件传参的方式来做到这点*1.父组件向子组件传递参数（还可以传递函数） ====》props*父组件通过自定义属性的方式传给子组件(:parentmsg=”msg”)，子组件用props接受(props:[“parentmsg”]) <ahead
复制链接

扫一扫

专栏目录