// 子组件 data () { return { msg: 'Welcome to Your Vue.js App' } }, methods: { change(){ this.$emit('sendMsg',this.msg) //把msg传递给父组件 } } // 父组件 // 引入子组件，并定义components components: { hello }, methods: { show(msg){ // 这里接受子组件传递的参数 console.log(msg); } } <hello @sendMsg='show'></hello> // 这里不用传递参数，不然会覆盖子元素传递的参数
ref(用来获取dom和子组件)
可以用来操作dom<p ref="p">hello</p>
可以用来组件中的通讯
在组件中使用的this.refs是一个对象，包含了所有的绑定了的dom和子组件
// html <h1 ref="myElement">这是一个dom元素</h1> //dom元素 <hello :propnum="propnum" :obj='d' @getson='getMsg' ref='child'></hello> // 子组件 >-- 组件中this.refs => {myElement: h1, child: VueComponent} // 运用(在父元素中调用子元素的方法) // html <hello ref='child'></hello> // 子元素hello methods: { change() { this.$emit('getson',this.msg) this.obj.name = 'yx' }, drop(el) { el.style.background = 'red'; } }, // 父元素 methods: { add() { console.log(this.refs); //{child: VueComponent} this.$refs.child.drop('这里传递父元素的dom节点') } } //如果有一个需求是，一个父元素有2个子组件，其中一个子组件的方法要调用另一个子组件的dom元素 //1. 一个子组件需要向父组件发送元素this.$emit('方法名',dom) //2. 父元素接受到子组件的传递得到对应dom //3. 父元素通过this.$refs调用对应的另一个子组件的方法并传入参数 // 子元素hello和world <div> <h1 ref="world">这是world的dom元素</h1> <button @click='send'>给父元素传递dom</button> </div> methods: { send(){ this.$emit('give',this.$refs.world); //给父元素发送dom } <div> <button>改变dom</button> </div> methods: { changeDom(target){ console.log(target) } } // 父元素 <world @give='父亲自己的方法'></world> <hello ref='helloChild'></hello> methods: { // 这里接受子元素传递过来的dom元素 '父亲自己的方法'(target) { this.refs.helloChild.changeDom(target) //调用另一个子元素的方法，并把dom传递过去 } }