categories:
- vue基础
tags: - 子父组件通信
- props
目录
子父组件通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue组件prop通信</title>
</head>
<body>
<div id="app"></div>
<script src="./vue.js"></script>
<script>
// 子传父
// 1.在父组件中绑定自定义的事件
// 2.在子组件中触发原生的事件，在函数中使用自定义的$emit触发自定义的 childHandler
Vue.component("Child",{
props: {
giveChildData:{
type:String
}
},
data(){
return {
childData:this.giveChildData
};
},
template:`
<div>
<p>我是一个子组件{{giveChildData}}</p>
<input type="text" v-model = 'childData' @input='changeValue(childData)' />
</div>
`,
methods:{
changeValue(val){
// 自定义的事件一定要通过$emit去触发
// $emit(自定义的事件名，消息)
this.$emit('childHandler',val);
}
}
});
// 定义全部组件
Vue.component('Vbtn',{
template:`
<button>按钮</button>
`
});
// 定义父组件
// 父传子
// 1.父子组件通信，先给父组件绑定自定义的属性
// 2.在子组件中使用props接收父组件传递的数据
// 3.可以在子组件中任意使用
Vue.component("Parent",{
data(){
return {
msg: '我是父组件中的数据',
};
},
template:`
<div>
<p>我是一个父组件</p>
<p>{{msg}}</p>
<Child :giveChildData='msg' @childHandler='child_handler'/>
</div>
`,
methods:{
child_handler(val){
console.log(val);
// this.msg = val;
}
}
});
// 定义局部组件
var Header = {
data(){
return {}
},
template:`
<div>
我是头部组件
</div>
`
};
var Content = {
data(){
return {}
},
template:`
<div>
我是内容组件
</div>
`
};
var Slider = {
data(){
return {};
},
template:`
<div>
<Parent/>
我是底部组件
<Vbtn/>
</div>
`
}
var App = new Vue({
el:'#app',
data(){
return {}
},
components:{
Header,
Content,
Slider,
},
template:`
<div>
<Header/>
<Content/>
<Slider/>
</div>
`
})
</script>
</body>
</html>