【Vue】项目中父子组件的连接及含参方法调用

一、组件的建立
1.在src的components下新建vue文件
2.新建的vue文件中需要有

<template></template>
<script>
	export default{
		name:'',
		data(){
		}
		...
	}
</script>

template中为html代码；

3.在想要引用组件的vue文件中（我的是helloworld）

引用组件：

import Question from './Question'

调用：

export default{
	components: {Question}
}

在template里面：

<Question></Question>

二、子组件调用父组件

子组件：

props: ['post'],		//要传进来的参数

在template里面：

<button v-on:click="$emit('enlarge-text')">		//enlarge-text为父组件里的方法

父组件：
参数’post’正常写在data里；方法’enlarge-text’我直接写在了html代码中，如下：

<fangda v-on:enlarge-text="postFontSize += sizeadd">

fangda标签就是调子组件的标签
理论上来讲，写在method里面应该也可以，未测试

三、父组件调用子组件的方法（含参）

昨天遇到一个需要公共调用的方法，本来想写到公共js里，写了半天写不出来，后来就改了思路，写成了一个公共组件，想用的页面自己调就好了。
首先把方法写在子组件里，然后在template里正常用，唯一的区别就是方法的参数不能写在data里而是props里，如下：

props:['Columns','numCol','RowData','numData'],

父组件调用时，在template用v-on传参进去：

<MergeTable :Columns="methodColumns" :numCol="[1]" :RowData="methodData" :numData="[1]"></MergeTable>

非常简单。