<body>
**父组件--子组件之间传值:
在子组件标签上绑定自定义属性名,
值是父组件需要传递的数据,
子组件内部通过 props属性接收属性名,(属性名随意定)**
<div id="out">
<h2>嵌套组件</h2>
<v-parent></v-parent>
</div>
<template id='parent'>
<div>
<h2>父组件</h2>
<h2>{{info}}</h2>
<button type="button" @click='send()'>发送给子组件</button>
<hr >
<v-child :name='info1' a='hi'></v-child>
</div>
</template>
<template id='child'>
<div>
<h2>子组件</h2>
<p>接收父组件的数据:-- {{name}}</p>
<p>{{a}}</p>
</div>
</template>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#out",
data: {},
components:{
'v-parent': {
template: "#parent",
data() {
return {
info:'父组件的数据',
info1:'',
}
},
methods:{
send(){
console.log('ceshi')
this.info1=this.info
}
},
components: {
'v-child': {
template: '#child',
props:['name','a'],
data() {
return {}
}
}
},
},
}
})
</script>
父组件向子组件传值
最新推荐文章于 2023-07-15 00:20:26 发布