父组件-子组件-孙子组件，，，，现在我要你在孙子组件里改变父组件的值，怎么改？有很多方法啦，但是$listeners给我们提供了一个新的思路。话不多说，直接上代码
<template> <div> <childcom :name="name" :age="age" :sex="sex" @testChangeName="changeName"></childcom> </div> </template> <script> export default { 'name':'test', props:[], data(){ return { 'name':'张三', 'age':'30', 'sex':'男' } }, components:{ 'childcom':{ props:['name'], template:`<div> <div>我是子组件 {{name}}</div> <grandcom v-bind="$attrs" v-on="$listeners"></grandcom> </div>`, components: { 'grandcom':{ template:`<div>我是孙子组件-------<button @click="grandChangeName">改变名字</button></div>`, methods:{ grandChangeName(){ this.$emit('testChangeName','kkkkkk') } } } } } }, methods:{ changeName(val){ this.name = val } } } </script>
页面渲染如下：
$listeners可以让你在孙子组件改变父组件的值，是不是很方便............
到此这篇关于vm.$attrs使用场景详解的文章就介绍到这了,更多相关vm.$attrs使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: