vue20 父子组件数据交互
2024-08-31 14:42:18
子组件使用父组件数据
<!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>
最新文章
- js回顾2
- create mystic by Django
- [js开源组件开发]js手机端浮层控件，并有多种弹出小提示，兼容pc端浏览器
- Leetcode: Shuffle an Array
- 20141030--SQL2008常用命令-1
- Struts2零碎点整理
- ashx调用session对象
- jquery中ajax的dataType属性包括哪几项
- Windows提供了两种将DLL映像到进程地址空间的方法
- Ajax实现动态的二级级联菜单
- BZOJ2440(全然平方数)二分+莫比乌斯容斥
- loj1370（欧拉函数+线段树）
- iOS 播放GIf图, 动态效果
- 下载python的Crypto库出现的问题的解决：ModuleNotFoundError: No module named 'Crypto'
- mysql 错误 ERROR 1030 Got error 28 from
- LeetCode算法题-License Key Formatting（Java实现）
- nginx 代理跨域
- 7 款顶级的开源 Web 分析软件
- windows dos权限管理
- 2018.12.31 Failed to load JavaHL Library.错误解决