vue2父组件调用子组件的属性、方法

一、沿用上次的案例

vue2父组件给子组件传值

二、改写子组件，添加子组件方法

在子组件中methods中定义了getContent()

点击查看代码

<template>
  <div>
    <ul>
      <li>姓名：{{ name }}</li>
      <li>性别：{{ sex }}</li>
      <li>爱好：{{ hobby }}</li>
      <li>年龄: {{ age }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  // 1. 注释子组件User原有的定义data方式
  /* data() {
    return {
      name: "Anbin",
      sex: "男",
      hobby: "sleep",
      age: 18,
    }
  }, */

  //2. 改为定义接收父组件的值
  //props: ["name", "sex", "hobby", "age"],

  //2.1  在定义接收父组件的值基础上，增加属性要求的数据类型
  /* props: {
    name: String, //要求传递的name属性值必须是 字符串类型
    sex: String, //要求传递的sex属性值必须是 字符串类型
    hobby: String, //要求传递的hobby属性值必须是 字符串类型
    age: Number, //要求传递的age属性值必须是  数字类型
  }, */

  //2.2  在定义接收父组件的值基础上，增加属性要求的数据类型、默认值、是否必填
  props: {
    name: {
      type: String, //要求name属性值必须是字符串类型
      defalut: "Anbin", //默认name属性值是Anbin
      required: true, //要求父组件使用本组件，必须传递name属性值
    },
    sex: {
      type: String, //要求sex属性值必须是字符串类型
      required: true, //要求父组件使用本组件，必须传递sex属性值
      //sex属性没有默认值
    },
    hobby: {
      type: String, //要求hobby属性值必须是字符串类型
      defalut: "吃饭", //默认hobby属性值是吃饭
      // hobby不是必须传递的
    },
    age: {
      // type: Number, //要求age属性值必须是数值类型
      type: [Number], //age属性值可以是数值和字符串类型
      defalut: 19, //默认defalut属性值是吃饭
      required: true, //要求父组件使用本组件，必须传递age属性值
    },
  },

  methods: {
    getContent() {
      return "我是user组件的方法返回值";
    },
  },
};
</script>

<style>
</style>

三、改写父组件

1. 父组件App中定义了getUserData() 用于获取子组件信息
2. 父组件App中定义了getButtonDom() 用于获取html元素的dom
3. 控制台查看效果

点击查看代码

<template>
  <div>
    <h1>{{ title }}</h1>
    <!-- 3. 在页面上使用子组件User -->
    <!-- <User></User> -->

    <!-- 3.1 在页面使用子组件的基础上，实现父组件向子组件传值，以让子组件数据正常使用 -->
    <User name="小明" :age="18" hobby="睡觉" sex="男"></User>

    <!-- 3.2 打上ref标识，用于父组件调用子组件的属性值和方法 -->
    <User name="小军" :age="30" hobby="钓鱼" sex="男" ref="xiaojun"></User>
    <User name="小红" :age="15" hobby="跳舞" sex="女" ref="xiaohong"></User>
    <span ref="test">这是一段普通的文字</span>

    <div>
      <button @click="getUserData">点我获取User子组件的属性和方法</button>
      <hr />
      <button @click="getButtonDom">点我获取这个按钮的dom</button>
    </div>
    
  </div>
</template>

<script>
// 1. 引入子组件User.vue,并起名为User
import User from "./components/User.vue";

export default {
  name: "App",
  data() {
    return {
      title: "我是App组件",
    };
  },
  components: {
    // 2. 在父组件App中注册子组件User
    User,
  },
  methods: {
    getUserData() {
      // 获取当前组件中，所有打了ref标识的子组件对象：VueComponent(简称vc
      console.log(this.$refs);
      // 获取所有ref标识为xiaojun的子组件对象
      console.log(this.$refs.xiaojun);
      // 获取xiaojun子组件对象上hobby属性的值
      console.log(this.$refs.xiaojun.hobby);
      // 获取xiaojun子组件对象上,getContent方法的返回值
      console.log(this.$refs.xiaojun.getContent());
    },
    getButtonDom() {
      // 获取ref标识为test的元素dom对象
      console.log(this.$refs.test);
    },
  },
};
</script>

<style>
</style>

控制台效果：

四、父组件获取子组件属性、方法步骤

以第三步代码举例

1. 打标识：
   在父组件中，找到需要获取的子组件，在上面定义ref标识、
   ref标识像html的id一样，需具备唯一性，建议使用组件名称作为标识(保证唯一性
   如若多个组件使用了同一个标识，则后者会覆盖前者，也就是只取最后一个ref标识的组件信息
2. 再获取：
   在父组件中，可以定义methods，然后在methods中通过ref标识获取对应组件的信息(获取vc
   这样就能获取到组件的所有属性值和调用方法了，getUserData()就很好的实现了这步
3. 获取dom
   ref标识也可以用来在组件中获取dom对象，例如getButtonDom(),步骤还是一样的打ref标识再获取，只是获取到的值是dom对象(并不推荐这样做，vue设计出来就是为了避免开发者直接操作dom...