component -- 组件传值子传父 · Vue&&TypeSprict--基础总结

[TOC] >[success] # 子传父 ~~~ 1.想要子传父，通过子组件控制父组件方法，进而让父组件的方法自己改变自己的data 2.明确父组件绑定的dom上内容作用域都属于父组件的，因此传值的都是父组件的data或者methods例如下面的案例，首先v-bind:title = 'title'和 :click='parentClick' 中左面都是子组件的接受的变量值，右面都有可能是父组件 data或者methods传值,父传子不仅仅可以传data也可以传methods: <div id='app'>  <my-com v-bind:title = 'title' :func='parentClick'></my-com> <div> 3.简单总结:等号左面的属于子组件的右面属于父组件 ~~~ >[info] ## 子传父 ~~~ 1.子传父就是子组件控制父组件方法，让父组件变相改变自己data 2.需要在子组件methods，某个方法中使用$emit('func','传递的参数') 来控制 3.这种控制是变相的，因此会在子组件中单独有一个事件在内部专门触发，$emit 方法。 ~~~ >[danger] ##### 使用$emit -- 案例 ![](https://box.kancloud.cn/429e3cd47a7eded5e1a48afa505ab302_337x315.png) ~~~ <!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 @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> ~~~ >[danger] ##### 使用 -- 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> ~~~ >[danger] ##### props -- 利用函数回调的方式，不推荐使用 ~~~ 1.这种方法不推荐，利用的是在父组件绑定一个和子组件相关的方法利用props ，在子组件去调用方法的时候，变相的调用父组件和props相关绑定的方法，形成回调函数，来实现子传父 ~~~ * 子组件的写法 ~~~ <template> <div> <h1 @click="changeMessage">{{message}}</h1> </div> </template> <script> export default { name: 'test', props:{ message:{ type:String, }, onChange: { type: Function, default: () => {} } }, methods:{ changeMessage(){ // 触发和父组件形成绑定关系的props this.onChange('测试') } } } </script> <style scoped lang="less"> </style> ~~~ * 父组件的写法 ~~~ <template> <Test :onChange="changeMessage"/> </template> <script> import Test from '@/components/test.vue' export default { name: "Index", components:{ Test }, data(){ return{ pMessage:'测试111' } }, methods:{ // 将父组件的方法和子组件的props方法绑定形成回调 changeMessage(val){ this.pMessage = val } } } </script> <style scoped> </style> ~~~