父子组件通信:
1.父组件向子组件传递数据,子组件可以使用 props 接收父组件的数据
2.子组件可以使用this.$emit触发父组件的自定义事件
父组件通过props向子组件传递数据
第一步:需要在父组件的data里面定义好所需要的数据
data() {
return {
tabsData:[
...
]
}
},
然后在父组件中子组件的标签里面进行数据绑定(如果传递的数据是静态的,可以不进行绑定)
<question-form
:tabs-data = 'tabsData'/>
注意:在标签上的属性都要用小写,或者 中横线 - 连接
vue官网是这样说的(HTML 中的 attribute 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用DOM 中的模板时,amelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名)
数据如果是静态
<child msg= "这里是你要传给子组件的数据" />
第二步:子组件接收值
子组件用props来接收值
props:{
tabsData:{
default:()=>[],
type:Array
}
},
注意:在props中定义的属性,都可以在子组件中直接使用;如果props接收的数据需要处理,因为props里面的数据不能直接修改,需要在data里面重新定义一个新的变量,把接收到的数据赋值给这个变量,然后做修改。
子组件使用this. $emit()向父组件传值,父组件用v-on来监听子组件的事件
首先需要在父组件中引入子组件,然后传值
第一步: 在父组件中引入子组件,用import引入
import questionForm from './question/questionForm';
然后声明注册组件
components: {
questionForm
},
把子组件当做标签使用
<question-form
@closeExamTitle="closeExamTitle"/>
第二步:子组件向父组件传值
在子组件中需要向父组件传值处使用this.
e
m
i
t
(
“
f
u
n
c
t
i
o
n
”
,
p
a
r
a
m
)
或
者
t
h
i
s
.
emit(“function”,param)或者this.
emit(“function”,param)或者this.emit(“function”),其中function为父组件定义的函数,param为向父组件传递的数据
带参数
saveExamTitle() {
...
this.$emit('closeExamTitle', 'refresh');
...
},
不带参数
// 取消修改的方法
cancle() {
this.$emit('cancledialog');
}
在父组件中子组件引用处添加函数v-on:function(子组件定义的函数) = “xxx(父组件定义的函数,用于接收子组件传值并进行相应的数据处理)”,这两个函数名可定义为同一名称。
v-on:可用@代替 ,比如@function = “xxx”
<question-form
@closeExamTitle="closeExamTitle"/>
<change-password
@cancledialog="cancle" />
如果有参数就在父组件定义的方法里面接收子组件的参数
closeExamTitle(isRefresh) {
//可以根据参数做操作
}