<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>父组件向子组件传值</title>
</head>
<body>
<div id="app">
<div>{{pmsg}}</div>
<menu-item title="来自父组件的值"></menu-item>
<menu-item :title="ptitle" content=‘hello‘></menu-item>
<menu-item1 :pstr=‘pstr‘ :pnum=‘12‘ pboo=‘true‘ :parr=‘parr‘ :pobj=‘pobj‘></menu-item1>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
Vue.component(‘menu-item‘, {
//子组件用属性props接收父组件传递过来的数据
props: [‘title‘, ‘content‘],
data: function () {
return {
msg: ‘子组件本身的数据‘
}
},
template: ‘<div>{{msg+"---"+title+"---"+content}}</div>‘
});
Vue.component(‘menu-item1‘, {
props: [‘pstr‘, ‘pnum‘, ‘pboo‘, ‘parr‘, ‘pobj‘],
template: `
<div>
<div>{{pstr}}</div>
<div>{{12+pnum}}</div>
<div>{{typeof pboo}}</div>
<ul>
<li :key=‘index‘ v-for=‘(item,index) in parr‘>{{item}}</li>
</ul>
<span>{{pobj.name}}</span>
<span>{{pobj.age}}</span>
</div>
`
})
var vm = new Vue({
el: ‘#app‘,
data: {
pmsg: ‘父组件内容‘,
ptitle: ‘动态绑定属性‘,
pstr: ‘hello‘,
parr: [‘apple‘, ‘orange‘, ‘banana‘],
pobj: {
name: ‘lisi‘,
age: 12
}
}
});
</script>
</html>
原文：https://www.cnblogs.com/dss-99/p/15260241.html