Vue组件间的通信

1.props

• 父子组件

<div id=app>
	<父组件把message值传递给子组件>
	<my-cpn1 :content="message"></my-cpn1>
</div>
<script>
	var cpn1 = {
		// 使用props接收父组件传递过来的数据
		props:['content']
		template:'<div>{{ content }}</div>',
		}
		
	var app = new Vue({
		el:'#app',
		data:{
			// 父组件的数据
			message:'parentComponent...'
		},
		components:{
			'childComponents':cpn1 ，
		}
	})
</script>

2.$emit

子组件通过事件触发的方式传递数据，父组件使用v-on/@自定义事件进行监听

<div id=app>
    // 父组件
	<my-cpn1 @event='eventHandler'></my-cpn1>
</div>

<script>
	var cpn1 = {
		data:function(){
			return {content:'子组件数据'}
		},
		template:'<div @click="trigger">使用事件把数据传递给父组件</div>',
		methods:{
			trigger:function(){
				this.$emit('event',this.content)
			}
		}
	}
	var app = new Vue({
		el:'#app',
		components:{
			'my-cpn1':cpn1
		},
		methods:{
			eventHandler(value){
				console.log('print'+value)
			}
		}
	})
</script>

// 子组件cpn1中定义了@click="trigger"事件，点击触发trigger函数，函数内部this.$emit('event',this.content)派发一个事件，事件名为event，父组件中使用@监听event事件@event='eventHandler'，因此点击后，会触发父组件中的eventHandler方法，方法的参数值value就是子组件传递的数据value：content

3.$ref

• 若ref用在子组件上，则指向子组件的实例，可以通过ref获取子组件定义的属性和方法
• 若ref用在普通dom元素，引用指向DOM元素，可以获取dom的属性集合，类Jquery中的选择器

<div id=app>
	<父组件把message值传递给子组件>
	<my-cpn1 ref="message"></my-cpn1>
</div>
<script>
	var cpn1 = {
		
		template:'<div>{{ content }}</div>',
		data:function(){
			return {
				content :''
			}
		},
		methods:{
			getMsg(value){
				this.content =value
			}
		}
		}
		
	var app = new Vue({
		el:'#app',
		components:{
			'my-cpn1':cpn1 ，
		},
		mounted(){
			this.$refs.message.getMsg('父组件给子组件传递数据的')
		}
	})
</script>


// 在父组件的mounted生命周期中，使用this.$refs.message.getMsg()获取子组件的getMsg方法，将值传递给子组件，子组件获取值重新渲染页面

4. attrs和 listeners 及 inheritAttrs

• attrs解决隔代传值问题