<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
// Parent -> Child
// 在Parent组件引用的子组件中绑定自定义属性
// 组件就是制作自定义标签,props选项就是设置和获取标签上的属性值的。Child组件使用props接收Parent组件传递的数据
// 可以在Child组件中任意使用
Vue.component('Parent', {
data() {
return {
msg: 'Parent data'
}
},
template: `
<div>
<p>Parent组件</p>
<Child :childData="msg" />
</div>
`
});
Vue.component('Child', {
data() {
return {
}
},
props: ['childData'],
template: `
<div>
<p>Child组件{{childData}}</p>
<input type="text" v-model="childData"">
</div>
`
});
var App = {
data() {
return {
}
},
template: `<Parent />`
};
var vm = new Vue({
el: '#app',
data: {
},
components: {
App
},
template: `<App />`
});
</script>
</body>
</html>
08-29
2万+