vue子组件向父组件传值的三种方式_vue子组件改变父组件的值

大家好，又见面了，我是你们的朋友全栈君。

1、前言

日常积累，欢迎指正

2、正文

vue2.6.11
博客正文为三种方法的核心代码记录，源代码在 vue-project 的分支 dev-005 ,可以直接获取代码运行查看

2.1、子组件中直接 this.$parent.parentNameInParentMethod()

代码语言：javascript复制

/** 父组件 */
export default { 
   
    methods: { 
   
        searchEnter:function(){ 
   
            console.log('search enter')
        }
    }
}
/** 子组件 */
export default { 
   
  name: "HomeHeader",
  methods: { 
   
    enterFn: function() { 
   
      this.$parent.searchEnter()
    }
  }
}

代码语言：javascript复制

 <input placeholder="请输入关键字" @keyup.enter="enterFn" />

如果有向父组件传参数的需求的话只需要添加参数即可

代码语言：javascript复制

export default { 
   
  name: "Search",
  methods: { 
   
    enterFn: function() { 
   
      this.$parent.searchEnter(this.inputText)
    }
  },
  data() { 
   
    return { 
   
      inputText: ""
    };
  }
}

代码语言：javascript复制

 <input placeholder="请输入关键字" v-model="inputText" @keyup.enter="enterFn" />

可以在调用时直接传参吗?

2.2、使用 $emit() 给组件一个自定义事件

子组件

代码语言：javascript复制

export default { 
   
  name: "HomeHeader",
  methods: { 
   
    enterFn: function() { 
   
      this.$emit('enter');
    }
  }
}

代码语言：javascript复制

<input @keyup.enter="enterFn" />

<!-- 或者 不借助当前组件的 enterFn 方法 直接使用内联语句 @keyup.enter="$emit('enter')" -->
 <input @keyup.enter="$emit('enter')" />

父组件

代码语言：javascript复制

export default { 
   
  name: "HomeHeader",
  methods: { 
   
    searchEnter: function() { 
   
      console.log("search enter");
    }
  }
}

代码语言：javascript复制

<Search @enter="searchEnter" />

如果要传参数的话

子组件

代码语言：javascript复制

export default { 
   
  name: "HomeHeader",
  methods: { 
   
    enterFn: function() { 
   
      this.$emit('enter',this.inputText);
    }
  },
  data() { 
   
    return { 
   
      inputText: ""
    };
  }
}

代码语言：javascript复制

<input @keyup.enter="enterFn" v-model="inputText" />
<!-- 这里也可以 不借助当前组件的 enterFn 方法 直接使用内联语句 @keyup.enter="$emit('enter',inputText)" -->
 <input @keyup.enter="$emit('enter',inputText)" v-model="inputText" />

父组件

代码语言：javascript复制

export default { 
   
  name: "HomeHeader",
  methods: { 
   
    searchEnter: function(value) { 
   
      console.log("search enter");
      console.log(value)
    }
  }
}

代码语言：javascript复制

<Search @enter="searchEnter" />

2.3、使用 props – 推荐

我是从 react 过来的，这种方式与 react 子组件向父组件传值(子组件调用父组件方法)非常相似

子组件

代码语言：javascript复制

<input placeholder="请输入关键字" v-model="inputText" @keyup.enter="enterFn" />
<!-- 可以不借助 enterFn 方法直接 @keyup.enter="enter" 这种写法就不需要中间函数 enterFn 了 看起来更简洁 -->
<input placeholder="请输入关键字" v-model="inputText" @keyup.enter="enter" />

代码语言：javascript复制

export default { 

name: "Search",
props: { 

enter: { 

type: Function,
default: null
}
},
methods: { 

enterFn: function() { 

if (this.enter) { 

this.enter()
this.enter(this.inputText) // 如果要传参数直接在这里传递就好了
}
}
},
data() { 

return { 

inputText: ""
};
}
};

父组件

代码语言：javascript复制

<Search :enter="searchEnter"/>

代码语言：javascript复制

import Search from "../Search/index.vue";
export default { 

name: "HomeHeader",
components: { 

Search
},
methods: { 

searchEnter: function() { 

console.log("search enter");
}
}
};

如果想要传递参数的话

代码语言：javascript复制

export default { 

name: "Search",
props: { 

enter: { 

type: Function,
default: null
}
},
methods: { 

enterFn: function() { 

if (this.enter) { 

this.enter(this.inputText) // 
/** * 在这里传递或直接内联调用 enter 方法传递 * * <input placeholder="请输入关键字" * v-model="inputText" * @keyup.enter="enter(inputText)" * /> */
}
}
},
data() { 

return { 

inputText: ""
};
}
};

父组件

代码语言：javascript复制

<Search :enter="searchEnter"/>

代码语言：javascript复制

import Search from "../Search/index.vue";
export default { 

name: "HomeHeader",
components: { 

Search
},
methods: { 

searchEnter: function(value) { 

console.log("search enter")
console.log(value)
}
}
};

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/186768.html原文链接：https://javaforall.cn

react https 网络安全 vue.js

0 人点赞