Foreword:
Characteristics of props property : (Unidirectional data flow) Businesses often encounter two situations where props need to be changed. One is that the parent component passes the initial value in, and the child component saves it as the initial value, which can be used and modified at will in its own scope. In this case, you can declare another data in the component data, referencing the prop of the parent component.
$ emit : $ emit triggers the event on the current instance, which can also be simply understood as triggering the event on the parent component (bubble up)
For specific $ emit, refer to the official documentation: https://cn.vuejs.org/v2/api/#vm-emit
No parameter type:
Case: (see explanation for some explanations)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div :style="{fontSize:fontSize+'px'}">{{pmsg}}</div>
<!-- 注意要加单位px 不然不会生效 -->
<menu-item :parr="parr" @enlarge-text="handle"></menu-item>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 子组件向父组件传值-基本用法
//props传递数据原则：单向数据流
Vue.component('menu-item', {
props: ['parr'],
template: `
<div>
<ul>
<li :key='index' v-for='(item,index) in parr'>{{item}}</li>
</ul>
<button @click='parr.push("lemon")'>添加lemon水果(这种方法不推荐)</button>
<!--直接子组件操作父组件传过来的数据 但是这种方法不推荐！！！-->
<!-- props传递过来的数据是单向数据流 只允许父组件向子组件中传递数据 但是不允许直接操作props中的数据-->
<button @click="$emit('enlarge-text')">扩大父组件字体大小</button>
</div>
`
});
var vm = new Vue({
el: '#app',
data: {
pmsg: '父组件中内容(初始size=10px 每次加5px)',
parr: ['apple', 'orange', 'banana'],
fontSize: 10
},
methods: {
handle: function() {
// 扩大字体大小
this.fontSize += 5;
}
}
});
</script>
</body>
</html>
With parameters :
result:
Case:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
<menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
子组件向父组件传值-携带参数
*/
Vue.component('menu-item', {
props: ['parr'],
template: `
<div>
<ul>
<li :key='index' v-for='(item,index) in parr'>{{item}}</li>
</ul>
<button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button>
<button @click='$emit("enlarge-text", 10)'>扩大父组件中字体大小</button>
</div>
`
});
var vm = new Vue({
el: '#app',
data: {
pmsg: '父组件中内容',
parr: ['apple','orange','banana'],
fontSize: 10
},
methods: {
handle: function(val){
// 扩大字体大小
this.fontSize += val;
}
}
});
</script>
</body>
</html>
