hdml指的是什么接口
183
2023-06-04
Vue 父子组件、组件间通信
本人对vue组件间通信不懂,搜索了很多关于Vue 父子组件间通信介绍,下面我来记录一下,有需要了解Vue 父子组件、组件间通信的朋友可参考。希望此文章对各位有所帮助。
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{},
components:{
aaa:{
template:'
components:{
bbb:{
template:'
}
}
}
}
});
}
//子组件获取父组件的值
window.onload = function () {
var vm = new Vue({
el: '#box',
data: {
a: 'aaa'
},
components: {
'aaa': {
data(){
return {
msg: 111,
msg2: '这是父组件的数据'
}
},
EBTxkOKQYq template: '#aaa',
components: {
'bbb': {
//html中的my-msg这种形式,js中应该采用驼峰命名myMsg
props: ['mmm', 'myMsg'],
template: '
}
}
}
}
});
}
//子组件获取父组件的值
window.onload = function () {
var vm = new Vue({
el: '#box',
data: {
a: 'aaa'
},
components: {
'aaa': {
data(){
return {
msg: 111,
msg2: '这是父组件的数据'
}
},
template: '#aaa',
components: {
'bbb': {
//html中的my-msg这种形式,js中应该采用驼峰命名myMsg
props: ['mmm', 'myMsg'],
template: '
}
}
}
}
});
}
//父组件获取子组件的值
window.onload = function () {
var vm = new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg:111,
msg2:'我是父组件的数据'
}
},
template:'#aaa',
methods:{
get(msg){
this.msg = msg;
EBTxkOKQYq }
},
components:{
'bbb':{
data(){
return {
a:'我是子组件的数据'
}
},
template:'#bbb',
methods:{
send(){
this.$emit('child-msg',this.a);
}
}
}
}
}
}
});
}
我是父级 -》 {{msg}}
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~