vue---父子组件间的数据传递，非父子组件间的数据传递_vue3 emit 子组件传递的参数非子组件传递的参数-CSDN博客

本文链接：https://blog.csdn.net/qq_36132291/article/details/113123271

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			//父组件通过属性的形式向子组件传值 :count传递的是一个js表达式
			
			// this.$emit('inc',2) 子组件通过事件触发向将要传递的参数传递出去
			//父子件通过 @inc='handleIncrease' 监听子组件的事件获得子组件的传值
			//因为组件使用在父组件中 handleIncrease要写在父组件的实例中
			<counter :count='0' @inc='handleIncrease'></counter>
			<counter :count='1' @inc='handleIncrease'></counter>
			
			//父组件内的div 
			//子组件向父组件传值通过事件的形式
			<div>{{total}}</div>
		</div>
		<script>
			var counter={
				props:['count'],//子组件通过props接收父子件传递的值
				template:'<div @click="handleClick">{{number}}</div>',
				data:function(){
					//单向数据流--父子件可以随意的向子组件传递参数，
					//子组件不能修改父组件传递过来的数据，只能使用
					return {
						number:this.count
					}
				},
				methods:{
					handleClick:function(){
						this.number=this.number+2;
						//子组件通过事件触发向将要传递的参数传递出去
						this.$emit('inc',2)
					}
				}
			}
			
			var vm=new Vue({
				el:"#app",
				data:{
					total:1
				},
				components:{
					counter:counter
				},
				methods:{
					handleIncrease:function(step){//接收子组件传递过来的参数
						this.total+=step
					}
				}
				
			})
		</script>
	</body>
</html>

父组件通过属性的形式向子组件传值:count='0'
子组件通过事件触发的形式向父组件传值this.$emit('inc',2)-----vm.$emit( eventName, […args] )
父子组件传值隐形规定,单向数据流--父子件可以随意的向子组件传递参数，
子组件不能修改父组件传递过来的数据，只能使用
如果要修改 拷贝一个副本出来 修改副本
data:function(){
		return {
			number:this.count //cout父组件传递的值
		}
},

子组件接收父组件参数校验

//子组件接收父组件参数校验
				props:{
					//count:String//必须是一个字符串
					//count:[String,Number] ,//传入的要是String或Number
					count:{
						type:String,//类型必须是String
						required:false,//父组件必须向子组件传count这个属性
						default:'default value' ,//reguired为false的时候，没传值的时候默认为default value
						validator:function(value){
							return (value.length>5)//对传入的值做更多校验
						}
					}
				},

给组件绑定原生事件

@click:native='handleClick'

非父子组件间的数据传递

 1. vuex
 2. Bus/总线/发布订阅模式/观察者模式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>费父子组件间传值(Bus/总线/发布订阅模式/观察者模式)</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<child content='sun'></child>
			<child content='yaya'></child>
		</div>
		<script>
			
			Vue.prototype.bus=new Vue() //实例上挂载一个bus 实现非父子组件的通信
			
			Vue.component('child',{
				
				props:{
					content:String
				},
				data:function(){
					return{
						selfContent:this.content
					}
				},
				template:'<div @click="handleClick">{{selfContent}}</div>',
				methods:{
					handleClick:function(){
						//通过this.bus.$emit向外触发一个change方法，传递一个参数
						this.bus.$emit('change',this.selfContent)
					}
				},
				mounted:function(){ //在模板数据结合挂载到页面之后
					var this_=this;
					this.bus.$on('change',function(msg){ //通过this.bus.$on监听获取传值
						alert(msg)
						this_.selfContent=msg
					})
				}
				
			})
			var vm=new Vue({
				el:"#app",
				methods:{
					
				},
			})
		</script>
	</body>
</html>