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

最新推荐文章于 2024-09-03 22:06:34 发布

jifubu6013

最新推荐文章于 2024-09-03 22:06:34 发布

阅读量3.4k

点赞数

<!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>