有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

Vue,组件,$parent调用父组件、$children、$refs调用子组件方法

vue 炮渣日记 1个月前 (11-08) 20次浏览 已收录 0个评论 扫描二维码

$parent、$children、$refs

直接调用子组件或者父组件的实例,直接调用数据可进行交互,而无法跨代通信,或者兄弟组件之间通信,这时候需要Vuex的解决方案。

$parent代码案例

点击子组件按钮,会触发父组件方法,每一次实例化一个组件,它的父组件只有一个,因此:this.$parent可直接得到父组件实例。

注册路由:

{
  path:'/demo01/parent',
  component:() => import('./../views/demo01/Parent.vue')
},

views/demo01/Parent.vue

<template>
  <div id="parent">
    <h1>{{ name }}</h1>
    <Child></Child>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  name: "parent",
  data() {
    return {
      name: "01.我是父组件",
    };
  },
  methods: {
    callme() {
      window.alert("我是父组件");
    },
  },
  components: {
    Child: Child,
  },
};
</script>
<style scoped>
</style>

views/demo01/Child.vue

<template>
  <div id="child">
    <h3>{{ name }}</h3>
    <button @click="callParent()">子组件调用父组件(this.$parent)</button>
  </div>
</template>
<script>
export default {
  name: "child",
  data() {
    return {
      name: "我是子组件",
    };
  },
  methods: {
    callParent() {
      // 调用父组件
      const parent = this.$parent;
      parent.callme();
    },
  },
};
</script>

<style scoped>
#child {
  background-color: rgb(20, 125, 218);
}
</style>

$children代码案例

$children与$parent操作方式都差不多,一个父组件可以有多个子组件,因此,使用$children返回的是一个组件实例数组,需要知道该实例的位置下标。

注册路由:

{
  path:'/demo02/parent',
  component:() => import('./../views/demo02/Parent.vue')
},

views/demo02/Parent.vue

<template>
  <div id="parent">
    <h1>{{ name }}</h1>
    <Child></Child>
    <button @click="callChild()">父组件调用子组件(this.$children)</button>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  name: "parent",
  data() {
    return {
      name: "02.我是父组件",
    };
  },
  methods: {
    callChild() {
      const children = this.$children[0];
      children.callme();
    },
  },
  components: {
    Child: Child,
  },
};
</script>

<style scoped>
</style>

views/demo02/Child.vue

<template>
  <div id="child">
    <h3>{{ name }}</h3>
  </div>
</template>

<script>
export default {
  name: "child",
  data() {
    return {
      name: "我是子组件",
    };
  },
  methods: {
    callme() {
      window.alert("我是子组件");
    },
  },
};
</script>

<style scoped>
#child {
  background-color: rgb(20, 125, 218);
}
</style>

$refs代码案例

$refs是对$children的改进,可以更方便得拿到子组件的实例对象。

注册路由:

{
  path:'/demo03/parent',
  component:() => import('./../views/demo03/Parent.vue')
},

views/demo03/Parent.vue

<template>
  <div id="parent">
    <h1>{{ name }}</h1>
    <Child ref="childComponent"></Child>
    <button @click="callChild()">父组件调用子组件(this.$refs)</button>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  name: "parent",
  data() {
    return {
      name: "03.我是父组件",
    };
  },
  methods: {
    callChild() {
      const childComponent = this.$refs.childComponent;
      childComponent.callme();
    },
  },
  components: {
    Child: Child,
  },
};
</script>

<style scoped>
</style>

views/demo03/Child.vue

<template>
  <div id="child">
    <h3>{{ name }}</h3>
  </div>
</template>

<script>
export default {
  name: "child",
  data() {
    return {
      name: "我是子组件",
    };
  },
  methods: {
    callme() {
      window.alert("我是子组件,this.$refs调用");
    },
  },
};
</script>

<style scoped>
#child {
  background-color: rgb(20, 125, 218);
}
</style>
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址