组件传值 之 父组件向子组件传值:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{msg}}
<menu-boy title="父组件传值"></menu-boy>
<menu-boy :title="ftitle"></menu-boy>
<menu-boy :title="ftitle" content="文本"></menu-boy>
</div>
<script src="lib/vue.js"></script>
<script type="text/javascript">
Vue.component('menu-boy',{
props:['title','content'],
data: function () {
return{
msg:'子组件'
}
},
template:'<div>{{msg }}--{{title}} --{{content}}</div>'
})
const vm= new Vue({
el:"#app",
data:{
msg:'父组件',
ftitle:'父组件动态传值'
},
})
</script>
</body>
</html>
对应视频:子向父
组件传值 之 子组件向父组件传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<menu-once :title="msg" @change-text="handle($event)"></menu-once>
</div>
<script src="lib/vue.js"></script>
<script type="text/javascript">
Vue.component('menu-once',{
props:['title'],
template: `<div>{{title}}<button @click="$emit('change-text','修改数据')">按钮</button></div>`
})
const vm= new Vue({
el:"#app",
data:{
msg:"父组件"
},
methods:{
handle(val){
this.msg = val;
}
}
})
</script>
</body>
</html>
对应视频:子组件向父组件传值
组件传值 之 兄弟组件之间传值:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<mr-tom></mr-tom>
<mr-mic></mr-mic>
</div>
<script src="lib/vue.js"></script>
<script type="text/javascript">
//事件中心
let vue = new Vue();
Vue.component('mr-tom',{
data:function () {
return{
msg:'mr-tom'
}
},
template:`<div>
<div>{{msg}}</div>
<button @click="handle">点击</button>
</div>`,
methods: {
handle(){
//触发兄弟组件的事件
vue.$emit('mic-event','tom来了')
}
},
mounted(){
//监听事件
vue.$on('tom-event',(val)=>{
this.msg=val;
})
}
});
Vue.component('mr-mic',{
data:function () {
return{
msg:'mr-mic'
}
},
template:`<div>
<div>{{msg}}</div>
<button @click="handle">点击</button>
</div>`,
methods: {
handle(){
vue.$emit('tom-event','mic来了')
}
},
mounted(){
//监听事件
vue.$on('mic-event',(val)=>{
this.msg=val;
})
}
})
const vm= new Vue({
el:"#app",
data:{
},
methods:{
}
})
</script>
</body>
</html>
对应视频:兄弟组件之间传值