~~~ <div id="app"> <div ref="hello" @click="handleClick"> hello world </div> </div> <script> var vm = new Vue({ el:"#app", methods:{ handleClick(){ this.$refs.hello.innerHTML = "change" } } }) </script> ~~~ > 实例 使用ref对子组件求和 ~~~ <div id="app"> <counter ref="one" @change="onChange" ></counter> <counter ref="two" @change="onChange"></counter> <div>{{total}}</div> </div> ~~~ ~~~ Vue.component("counter",{ data:function(){ return { num:1 } }, template:"<div @click='handleClick'>{{num}}</div>", methods:{ handleClick(){ this.num++ this.$emit('change') } } }) var vm = new Vue({ el:"#app", data:{ total:0 }, methods:{ onChange(){ console.log(this.$refs.one.num) console.log(this.$refs.two.num) this.total = this.$refs.one.num + this.$refs.two.num } } }) ~~~