子组件通过发射事件$.emit给父组件,通知父组件数据改变,父组件通过@xxx监听 父页面向子页面传值见:父页面向子页面传值 例子: 注册一个全局组件,和一个局部组件,将全局组件作为局部组件的子组件,并将全局组件中的值传给局部组件。
全局子组件代码: 父组件: 测试代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>子组件向父组件传值</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script> <script> window.onload = function() { Vue.component('my-componet', { data() { return { num: 1 } }, methods: { addHandler() { this.num++; console.log(this.num); this.$emit('add', this.num) } }, template: `<div> <h3>全局组件 子组件</h3> <h3>{{num}}</h3> <button @click="addHandler">增加</button> </div>` }) new Vue({ el: "#app", data: { }, methods: { }, components: { "my-com": { data() { return { str: '10', str1: { name: 'zhangsan', }, nums: null } }, methods: { addFather(num) { this.nums = num; } }, template: ` <div> <h1>局部组件 父组件</h1> <my-componet @add='addFather'></my-componet> <h2 >子组件传来的值:{{nums}}</h2> </div>` } } }) } </script> </head> <body> <div id="app"> <my-com></my-com> </div> </body> </html>效果: 可以看见父组件中接收了父组件的值
