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

Logo
Vue

前往低代码交流专区

更多推荐

cover

Mac 使用vscode 创建vue项目后修改文件提示：权限不足，以超级用户身份重试

avatar Vue
cover

基于nodejs+vue云计算的城乡医疗卫生服务系统[程序+论文+开题]-计算机毕业设计

avatar Vue
cover

ElasticSearch迁移至openGauss

avatar Vue