vue 子传父
1.想要子传父，通过子组件控制父组件方法，进而让父组件的方法自己改变自己的data
2.明确父组件绑定的dom上内容作用域都属于父组件的，因此传值的都是父组件的data或者methods例如
下面的案例，首先v-bind:title = 'title'和@click='parentClick' 中左面都是子组件的接受的变量
值，右面都有可能是父组件data或者methods传值:
<div id='app'>
<my-com v-bind:title = 'title' @func='parentClick'></my-com>
<div>
3.简单总结:等号左面的属于子组件的右面属于父组件
子传父个人理解
1.子传父就是子组件控制父组件方法，让父组件变相改变自己data
2.需要在子组件methods，某个方法中使用$emit('func','传递的参数') 来控制
3.这种控制是变相的，因此会在子组件中单独有一个事件在内部专门触发，$emit
方法。
使用$emit -- 案例
![]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script referrerpolicy="no-referrer" src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{count}}
<!--子组件用来传递父组件的方法-->
<my-Com2 @fun="myChange"></my-Com2>
</div>
<template id="com">
<!--在组件内部特意定义了一个触发父组件方法的点击事件-->
<button @click="changeParent">操作父组件的子组件方法</button>
</template>
<script>
let myCom2 = {
template:'#com',
data(){
return {
title:'子组件',
}
},
methods:{
// 用来专门触发父组件方法子组件，用来触发$emit
changeParent(){
// 根据上面的介绍原则等号左面的属于子组件的右面属于父组件
// 因此fun是子组件的,告诉自己的组件的点击事件，点击后触发
// $emit,让他去找参数中和func绑定的父组件的方法
// 第二个参数可以往父组件传值
this.$emit('fun','我是传值')
}
},
};
var vm = new Vue({
el: '#app',
data:{
count:0,
},
methods:{
// 子组件操控父组件改变自己data的方法
myChange(args){
console.log(args)
this.count++;
}
},
components:{
// 在外部声明变量，使用代码简洁
myCom2,
}
});
</script>
</body>
</html>
使用 -- sync语法糖案例
1.2.3.0新增的语法糖
2.这种就不涉及到通过方法去操控父组件中的data改变，而是利用子传父的思
想，把props中的属性值和父组件中的data形成捆绑，利用$emit改变子组件的
data，变相改变了父组件中的data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{count}}
<!--子组件用来传递父组件的方法-->
<my-Com2 v-bind:parent-Count.sync = 'count'></my-Com2>
</div>
<template id="com">
<!--在组件内部特意定义了一个触发父组件方法的点击事件-->
<button @click="changeParent">操作父组件的子组件方法</button>
</template>
<script>
let myCom2 = {
template:'#com',
data(){
return {
title:'子组件',
}
},
// 父传子
props:['parentCount'],
methods:{
// 用来专门触发父组件方法子组件，用来触发$emit
changeParent(){
// 根据上面的介绍原则等号左面的属于子组件的右面属于父组件
// 将父子组件data 都绑定在一起，改变子组件就是改变了父组件
this.$emit('update:parentCount',1000)
}
},
};
var vm = new Vue({
el: '#app',
data:{
count:0,
},
components:{
// 在外部声明变量，使用代码简洁
myCom2,
}
});
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。