组件之间的传值之父给子传（属性） props【‘属性名’】
2018-09-21 本文已影响0人
天赐很棒
父给子传实例1：
body部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="itany">
<father></father>
</div>
js部分：
<script src="js/vue.js"></script>
<script>
Vue.component('father',{
template:<div> <h1>这是父元素</h1> <child v-bind:number='num'></child> <button @click='add'>点击加1</button> </div>,
data:function(){
return{
num:1
}
},
methods:{
add:function(){
this.num++;
}
}
})
Vue.component('child',{
props:['number'],
template:`
<div>
<h3>这是子元素</h3>
<a href='#'>{{number}}</a>
</div>
`
})
new Vue({
el:'#itany'
})
</script>
</body>
</html>
1.png
父给子传实例2：
body部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<cont></cont>
</div>
js部分：
<script src='js/vue.js'></script>
<script>
Vue.component('cont',{
template:
<div> <h1>这是父元素</h1> <top-title v-bind:fruTit='tit'></top-title> <list v-bind:fruList='fruit'></list> </div>,data:function(){
return{
fruit:['apple','pear','banana'],
tit:'水果列表'
}
}
})
//子组件1
Vue.component('top-title',{
props:['fruTit'],
template:
<h3>{{fruTit}}</h3>})
//子组件
Vue.component('list',{
props:['fruList'],
template:`
<ul>
<li v-for="value in fruList">{{value}}</li>
</ul>
`
})
new Vue({
el:'#app'
})
</script>
</body>
</html>
2.png
父给子传实例3：
body部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<my-component></my-component>
</div>
js部分：
<script src='js/vue.js'></script>
<script>
Vue.component("my-component",{
template:`
<div>
<input type='text' v-model='list'>
<button @click='add'>添加</button>
<my-child v-bind:fruit='fruList'></my-child>
</div>
`,
methods:{
add:function(){
this.fruList.push(this.list);
this.list=''
}
},
data:function(){
return{
fruList:['apple','pear','banana'],
list:''
}
}
})
Vue.component('my-child',{
props:['fruit'],
template:`
<ul>
<li v-for="(value,index) in fruit">
{{value}}
<button @click='delt(index)'>删除</button>
</li>
</ul>
`,
methods:{
delt:function(ind){
this.fruit.splice(ind,1)
}
}
})
new Vue({
el:'#app'
})
</script>
</body>
</html>
3.png
