Vue父子组件之间的通信

1.父组件调用子组件的方法：
1.1 注册子组件

var mainApp = new Vue({
	components: {
		'sms-template': smsTemplate
	}
})

1.2 子组件加上ref

<sms-template ref="smsTemplate"></sms-template>

1.3 父组件通过ref访问子组件中定义的方法

showTemplateDlg: function showTemplateDlg() {
	this.$refs.smsTemplate.showTemplateDlg();
},

2.子组件传值给向父组件
2.1 子组件使用$emit声明自定义事件

selectTemplate: function selectTemplate(row) {
	this.template_dlg = false;
	this.$emit('select-template', row.content);
},

2.2 父组件监听自定义事件并处理事件

selectTemplate: function selectTemplate(content) {
	this.sms.content = content;
},

3.完整代码
父组件：

var mainApp = new Vue({
	data: {
		sms: {
			content,
		}
	},
	method: {
		selectTemplate: function selectTemplate(content) {
			this.sms.content = content;
		},
		showTemplateDlg: function showTemplateDlg() {
			this.$refs.smsTemplate.showTemplateDlg();
		},
	},
	components: {
		'sms-template': smsTemplate
	}
})

子组件：

var smsTemplate = {
	data: {
		template_dlg: false
	},
	methods: {
		showTemplateDlg: function showTemplateDlg() {
			this.template_dlg = true;
		},
		selectTemplate: function selectTemplate(row) {
			this.template_dlg = false;
			this.$emit('select-template', row.content);
		},
	}

}

页面：

<sms-template ref="smsTemplate" @select-template="selectTemplate"></sms-template>