vue-- 父--子传值
1.父到子之间的传值
父子之间的传值通过给子组件绑定自定义属性,例::name="str2",在子组件中通过props:[name]接受数据,例子如下:
<div id="out">
<v-parent></v-parent>
</div>
<template id="parent">
<div>
<h2>父组件</h2>
<p>{{str}}</p>
<button @click="tap()">发送到子组件</button>
<hr>
<v-child :name='str2'></v-child> //给子组件绑定自定义属性名
</div>
</template>
<template id="child">
<div>
<h2>子组件</h2>
<p>{{name}}</p>
</div>
</template>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#out',
components:{
'v-parent':{
template:'#parent',
data:function(){
return{
str:'我是父子件',
str2:''
}
},
methods:{
tap(){
this.str2 = this.str
}
},
components:{
'v-child':{
props:['name'],//在子组件中通过·props接受
template:'#child'
}
}
}
}
})
</script>