vue父组件使用子组件函数，vue子组件使用父组件函数

（1）vue中父组件调用子组件函数

用法： 子组件上定义ref="refName", 父组件的方法中用 this.$refs.refName.method 去调用子组件方法

详解： 父组件里面调用子组件的函数，父组件先把函数/方法以属性形式传给子组件；那么就需要先找到子组件对象，即 this.$refs.refName.

然后再进行调用，也就是 this.$refs.refName.method

子组件：

    <template><div>childComponent</div></template><script>export default {name: "child",methods: {childClick(e) {console.log(e)}}}</script>

父组件：

    <template><div><button @click="parentClick">点击</button><Child ref="mychild" />   //使用组件标签</div></template><script>import Child from './child';   //引入子组件Childexport default {name: "parent",components: {Child    // 将组件隐射为标签},methods: {parentClick() {this.$refs.mychild.childClick("我是子组件里面的方法哦");  // 调用子组件的方法childClick}}}</script>

（2）vue中子组件调用父组件函数

方法一：
第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法

父组件：

    <template><div><child></child></div></template><script>import child from '~/components/dam/child';export default {components: {child},methods: {fatherMethod() {console.log('测试');}}};</script>

子组件

    <template><div><button @click="childMethod()">点击</button></div></template><script>export default {methods: {childMethod() {this.$parent.fatherMethod();}}};</script>

方法二：
在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了

父组件

    <template><div><child @fatherMethod="fatherMethod"></child></div></template><script>import child from '~/components/dam/child';export default {components: {child},methods: {fatherMethod() {console.log('测试');}}};</script>

子组件

    <template><div><button @click="childMethod()">点击</button></div></template><script>export default {methods: {childMethod() {this.$emit('fatherMethod');}}};</script>

方法三
把方法传入子组件中，在子组件里直接调用这个方法

父组件

    <template><div><child :fatherMethod="fatherMethod"></child></div></template><script>import child from '~/components/dam/child';export default {components: {child},methods: {fatherMethod() {console.log('测试');}}};</script>

子组件

    <template><div><button @click="childMethod()">点击</button></div></template><script>export default {props: {fatherMethod: {type: Function,default: null}},methods: {childMethod() {if (this.fatherMethod) {this.fatherMethod();}}}};</script>

vue父组件使用子组件函数，vue子组件使用父组件函数相关推荐

Vue钩子函数以及父组件的8个钩子和子组件的8个钩子的先后执行的顺序
** vue组件生命周期 ** 一个组件从创建到销毁的整个过程就是生命周期生命周期函数(钩子函数) vue 框架内置函数,随着组件的生命周期,自动按次序执行作用:特定的时间点,执行某些 ...
vue 父组件获取接口值传到子组件_vue父组件异步获取数据传给子组件的方法
但是现在问题是父组件的数据是异步获取的,而子组件一开始就会渲染,如果此时没有传入数据,而子组件又要用到数据中的length属性时就会报错: 怎么办呢?最简单的办法就是让子组件条件渲染,当有数据的时候才 ...
父组件给子组件传值方法_【Vue】小学生都能看懂的子父组件传值
Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,其中之一就是组件的传值. 搭建的框架目录结构一.父传子动图效果及源码父传子源码: 父组件: 子组件: 二.子传父动 ...
【Vue 组件化开发三】父组件给子组件传递数据、组件通信（父传子、子传父）、父访问子（children、ref）、动态组件（is、component）
目录一.前言完整内容请关注: 二.父组件给子组件传递数据 1.使用props属性,父组件向子组件传递数据 1.使用组件的props属性 2.向cmessage对象传值 2. props属性使用 1 ...
Vue【组件传值1（父子、子父、祖孙、兄弟）】
其他传值方法见2 参考链接父子传值子组件可以通过props接受子组件的属性从而拿到属性值之后可以在页面中直接使用该属性来渲染属性值 props的值可以是一个数组它里面可以是该组件所有属性的集合 ...
vue 父刷新子_父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法...
场景: 我实际用到的是这样的,我父组件引用子组件related,父组件调用获取页面详情的方法,更新了state值related,子组件根据该related来渲染相关新闻内容,但是页面打开的时候总是先加 ...
Vue 进阶组件实战应用 -- 父子组件传值的应用实例（子父组件传值的两种触发方式）
基础的子组件和父组件通信已经搞定了,可以看此博客父子组件传值基础应用需求现在需求是在一个父页面引用子组件,不只是要实现基本的父子组件传值.并且子组件给父组件传值的触发条件要在父页面触发. 目前小 ...
Vue父组件调用子组件方法，报错[Vue warn]: Error in v-on handler: “TypeError: _this.$emit is not a function“
症状一开始浏览器控制台报这个错[Vue warn]: Error in v-on handler: "TypeError: _this.$emit is not a function&qu ...
一、vue中当数据在父组件需要给子组件传递数据的时候，子组件输出为undefined
父组件: <Type :imgList="imgList"/> 子组件: <img :src="imgList[0].imgUrl"/> ...
vue子组件mounted不执行_vue 路由子组件created和mounted不起作用的解决方法
vue 路由子组件created和mounted不起作用的解决方法判断项目是否启用keep-alive 启用使用exclude排除组件(我没有成功不知道为什么) 使用v-if判断(成功解决) 可以 ...

vue父组件使用子组件函数，vue子组件使用父组件函数

（1）vue中父组件调用子组件函数

子组件：

父组件：

（2）vue中子组件调用父组件函数

vue父组件使用子组件函数，vue子组件使用父组件函数相关推荐

最新文章

热门文章