版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/chi1130/article/details/81224743
方式一：静态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<body>
<div id="app">
<parsent></parsent>
</div>
<script>
var childNode = {
template:`
<div>{{forChildMsg}}</div>
`,
props: ['for-child-msg']
};
var parsentNode = {
template: `
<div>
<child for-child-msg="aaa"></child>
<child for-child-msg="bbb"></child>
</div>
`,
components: {
child: childNode
}
};
new Vue({
el: '#app',
components: {
parsent: parsentNode
}
})
</script>
</body>
</html>方式二：动态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<body>
<div id="app">
<parsent></parsent>
</div>
<script>
var childNode = {
template:`
<div>{{forChildMsg}}</div>
`,
props: ['for-child-msg']
};
var parsentNode = {
template: `
<div>
<child :for-child-msg="msg1"></child>
<child :for-child-msg="msg2"></child>
</div>
`,
components: {
child: childNode
},
data(){
return {
msg1: '这是msg1',
msg2: '这是msg2'
}
}
};
new Vue({
el: '#app',
components: {
parsent: parsentNode
}
})
</script>
</body>
</html>验证：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<body>
<div id="app">
<parsent></parsent>
</div>
<script>
var childNode = {
template:`
<div>{{forChildMsg}}</div>
`,
props: {
forChildMsg: {
type: String,
default:'12'
}
}
};
var parsentNode = {
template: `
<div>
<child :for-child-msg="msg1"></child>
<child :for-child-msg="msg2"></child>
</div>
`,
components: {
child: childNode
},
data(){
return {
msg1: '这是msg1'
}
}
};
new Vue({
el: '#app',
components: {
parsent: parsentNode
}
})
</script>
</body>
</html>