父组件->子组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- 01. 在son标签中, 添加一个属性 注意：使用msg属性传值时，f2s前加：--> <son :f2s='msg'></son> </div> <script> const vm = new Vue({ el: '#app', data() { return { msg: 'hello world' } }, methods: {}, components: { // 组件名：组件参数 son: { // 03组件中接收到的值的使用 template: '<h2>{{f2s}}</h2>', // 02props属性接收 props: ['f2s'] } } }); </script> </body> </html>
-
在son标签中添加属性f2s（属性名可以随意起）、要传的值
-
在子组件中使用props接收, 然后template中使用
子组件->父组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- 02. 引用组件 funfromson为子组件中$emit的第一个参数 fathermethod为父组件中用于接收参数的方法--> <son @funfromson="fathermethod"></son> </div> <script> const vm = new Vue({ el: '#app', data() { return { } }, methods: { // 03-父组件中接收子组件传参的方法，参数就是传的值 fathermethod(data) { alert('收到子组件的数据' + data) } }, components: { son: { template: '<button @click="send2f">点击了子组件</button>', methods: { send2f() { // 01-子组件->父组件通过this.$emit('父组件中引用子组件中的方法名','要传的参数') this.$emit('funfromson', 'xxxx'); }, }, } } }); </script> </body> </html>
示例中子组件是一个按钮, 当点击按钮时, 触发按钮的点击事件, 调用子组件的send2f方法
在send2f方法中通过this.$emit()调用父组件的方法, 并将数据做为参数传递过去