<!--第一种通过props传值,emit的方式,注意点@more是子组件emit的调用的方法名--> <template> <div> <compB :giveChildData="giveChild" @more="getChildData"></compB> <div>{{isMe}}</div> </div> </template> <script> import compB from './compB' export default{ name: 'compA', components:{ compB }, data(){ return { isMe: '', giveChild: '213' } }, methods:{ getChildData(data){ this.isMe = data; } } } </script>
//子组件compB <template> <div> <div>{{giveChildData}}</div> <div @click="sendChildData">点我将子的数据传给父级</div> </div> </template> <script> export default{ name: 'compB', data() { return { childData:111 } }, props: { giveChildData: { type: String, } }, methods:{ sendChildData() { this.$emit('more',this.childData) } }} </script>