您的位置：首页 > 产品设计 > UI/UE

Vue多层组件之间通信 3层父向子

2018-04-11 10:54 666 查看

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>

<div id="app">
<newtag :inf1='msg1' :inf2='msg2'></newtag>  <!-- 绑定属性 -->
</div>
<template id="child1">
<h1>{{infh1}}</h1>
</template>
<template id="child2">
<h2>{{infh2}}</h2>
</template>
<template id="parent">
<div><newc1 :infh1='inf1'></newc1>  <!-- 绑定属性 -->
<newc2 :infh2='inf2'></newc2>
</div>

</template>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">

var c1=Vue.extend({template:"#child1",
props:["infh1"]
});

var c2=Vue.extend({template:"#child2",
props:["infh2"]
});

Vue.component("newtag",
{template:"#parent",
props:['inf1','inf2'],
components:{"newc1":c1,
"newc2":c2
}
})

var app=new Vue({
el:"#app",
data:{
msg1:"1",
msg2:"22"
}
})

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Vue多层组件之间通信 3层 父向子

Vue多层组件之间通信 3层父向子