父组件向子组件传递参数(还可以传递函数) ====》props
父组件通过自定义属性的方式传给子组件(:parentmsg=”msg”)
,子组件用props
接受(props:[“parentmsg”])
<ahead :foo="mag"></ahead>
new Vue({
//父组件
el:"#box1",
data:{
mag:"首页"
}
})
Vue.component("ahead",{
//子组件
props:["foo"],//{
}
template:`<div>
<span><</span>
<i>{
{
foo}}</i>
<u>+</u>
</div>`
})
子组件向父组件传递参数(还可以传递函数)===》$emit/自定义事件方式
事件绑定机制:父组件通过自定义事件的方式向子组件传递方法(@mymsg=“show”)
,子组件用this.$emit()
接受(this.$emit(fun,参数1,参数2))
,参数可以是子组件的,顺便传给父组件,实现子组件向父组件传值
<aaa @mymsg="get"></aaa>
//子组件
var a={
data(){
return {
msg:"子组件数据"
}
},
methods:{
send(){
this.$emit('mymsg', this.msg,this.msg2);
}
},
template:`<div>
<h1>子组件