子组件使用父组件数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<!-- vue-devtools 调试工具 github 搜索vue-devtools，最下面Get it on the Chrome Web Store.-->
<div id="box">
<aaa>
</aaa>
</div>
<script>
var vm=new Vue({
el:‘#box‘,
data:{
a:‘aaa‘
},
components:{
‘aaa‘:{ //组件嵌套
template:‘<h2>我是aaa组件</h2><bbb></bbb>‘,
components:{
‘bbb‘:{
template:‘<h3>我是bbb组件</h3>‘
}
}
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa>
</aaa>
</div>
<script>
var vm=new Vue({
el:‘#box‘,
data:{
a:‘aaa‘
},
components:{
‘aaa‘:{
data(){
return {
msg:‘我是父组件的数据‘
}
},
template:‘<h2>我是aaa组件{{msg}}</h2><bbb></bbb>‘,
components:{
‘bbb‘:{//访问不到,子组件也没法访问父组件数据
template:‘<h3>我是bbb组件->{{msg}}</h3>‘
}
}
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa>
</aaa>
</div>
<template id="aaa">
<h1>11111</h1>
<bbb :mmm="msg2"></bbb> <!--aaa模版中可以访问aaa的data-->
</template>
<script>
var vm=new Vue({
el:‘#box‘,
data:{
a:‘aaa‘
},
components:{
‘aaa‘:{
data(){
return {
msg2:‘我是父组件的数据‘
}
},
template:‘#aaa‘, //aaa组件的模版
components:{
‘bbb‘:{
props:[‘mmm‘],
template:‘<h3>我是bbb组件->{{mmm}}</h3>‘ //bbb组件的模版
}
}
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa>
</aaa>
</div>
<template id="aaa">
<h1>11111</h1>
<bbb :mmm="msg2" :my-msg="msg"></bbb> <!--aaa模版中可以访问aaa的data-->
</template>
<script>
var vm=new Vue({
el:‘#box‘,
data:{
a:‘aaa‘
},
components:{
‘aaa‘:{
data(){
return {
msg:111,
msg2:‘我是父组件的数据‘
}
},
template:‘#aaa‘,
components:{
‘bbb‘:{
props:[‘mmm‘,‘myMsg‘],//js里面不能用横线要驼峰
template:‘<h3>我是bbb组件->{{mmm}} <br> {{myMsg}}</h3>‘ //子组件访问父组件的data
}
}
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa>
</aaa>
</div>
<template id="aaa">
<h1>11111</h1>
<bbb :mmm="msg2" :my-msg="msg"></bbb>
</template>
<script>
var vm=new Vue({
el:‘#box‘,
data:{
a:‘aaa‘
},
components:{
‘aaa‘:{
data(){
return {
msg:111,
msg2:‘我是父组件的数据‘
}
},
template:‘#aaa‘,
components:{
‘bbb‘:{
props:{
‘mmm‘:String,
‘myMsg‘:Number
},
template:‘<h3>我是bbb组件->{{mmm}} <br> {{myMsg}}</h3>‘
}
}
}
}
});
</script>
</body>
</html>
父组件使用子组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa>
</aaa>
</div>
<!--
子组件把自己的数据，发送到父级,vm.$emit(事件名,数据);
child-msg事件bbb是可以接收的，
接收v-on:简写@，接收事件执行一个函数get。
vm.$dispatch(事件名,数据) 子级向父级发送数据
vm.$broadcast(事件名,数据) 父级向子级广播数据
配合: event:{}
在vue2.0里面已经，报废了
-->
<template id="aaa">
<span>我是父级 -> {{msg}}</span>
<bbb @child-msg="get"></bbb>
</template>
<template id="bbb">
<h3>子组件-</h3>
<input type="button" value="send" @click="send">
</template>
<script>
var vm=new Vue({
el:‘#box‘,
data:{
a:‘aaa‘
},
components:{
‘aaa‘:{
data(){
return {
msg:111,
msg2:‘我是父组件的数据‘
}
},
template:‘#aaa‘,
methods:{
get(msg){
alert(msg);
this.msg=msg;
}
},
components:{
‘bbb‘:{
data(){
return {
a:‘我是子组件的数据‘
}
},
template:‘#bbb‘,
methods:{
send(){
this.$emit(‘child-msg‘,this.a);//this是vm
}
}
}
}
}
}
});
</script>
</body>
</html>
时间： 2024-10-08 12:36:51