6.3前端学习第四十六天-子组件向父组件传值-基本用法
个人小结：在之前的学习中学过了父组件通过props属性向子组件传值，现在来学习子组件如何向父组件传值，子组件可以通过自定义事件进行传值。下面来看这三行代码
<li :key='index' v-for='(item,index) in parr'>{{item}}</li>
第一行代码是对parr的遍历，
<button @click="parr.push('lemon')">点击</button>
第二行代码是往parr当中添加lemon，这里已经在向父组件传值
<button @click="emit('enlarge-text')对父组件执行操作，这里父组件调用子组件时
<menu-item :parr="parr" @enlarge-text="handle"></menu-item>
将具体操作指向了在methods当中定义的handle，代码如下：
var vm = new Vue({
el:'#app',
data: {
pmsg:'父组件中的内容',
parr:['apple','orange','banana'],
fontSize:10
},
methods:{
handle:function () {
//扩大字体大小
this.fontSize +=5;
}
}
});
如此一来便实现了通过自定义事件来向父组件执行操作。
body:
<body>
<div id="app">
<div :style="{fontSize:fontSize + 'px'}">{{pmsg}}</div>
<menu-item :parr="parr" @enlarge-text="handle"></menu-item>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
/*
子组件向父组件传值-基本用法
props传递数据原则：单向数据流
只允许父组件向子组件传递数据，不允许子组件直接操作props中的数据。
子组件通过自定义事件向父组件传递信息
*/
Vue.component('menu-item',{
props:['parr'],
template:`
<div>
<ul>
<li :key='index' v-for='(item,index) in parr'>{{item}}</li>
<button @click="parr.push('lemon')">点击</button>
<button @click="$emit('enlarge-text')">扩大父组件中字体大小</button>
</ul>
</div>
`
});
var vm = new Vue({
el:'#app',
data: {
pmsg:'父组件中的内容',
parr:['apple','orange','banana'],
fontSize:10
},
methods:{
handle:function () {
//扩大字体大小
this.fontSize +=5;
}
}
});
</script>
</body>
