【Vue】父子组件传值、方法引用

父子组件值、方法引用

1、值

1.1 父组件获取子组件值

父组件

<template>
  <div>
    <button @click="getChildValue">click</button>
    <child ref="child"></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  name: "Parent",
  components: {
    Child
  },
  data() {
    return {}
  },
  methods: {
    getChildValue() {
      console.log(this.$refs.child.msg1)
    }
  }
}
</script>

子组件

<template>
  <div id="child">
    <div>{{ msg1 }}</div>
  </div>
</template>

<script>
export default {
  name: "Child",
  data() {
    return {
      msg1: "i am child"
    };
  },
  methods: {}
}
</script>

测试结果在控制台查看

1.2 子组件获取父组件值

方式1：

props: ['parentName']

方式2：

props: {
  parentName: String //这样可以指定传入的类型，如果类型不对，会警告
}

方式3：

props: {
    msgVal: {
      type: String, //指定传入的类型
      //type 也可以是一个自定义构造器函数，使用 instanceof 检测。
      default: '' //这样可以指定默认的值
    }
}

注意：props 会在组件实例创建之前进行校验，所以在 default 或 validator 函数里，
诸如 data、computed 或 methods 等实例属性还无法使用

父组件

<template>
  <div>
    <child ref="child" :parentName="parentName"></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  name: "Parent",
  components: {
    Child
  },
  data() {
    return {
      parentName:'i am parent'
    }
  },
  methods: {
    
  }
}
</script>

子组件

<template>
  <div id="child">
    <button @click="getParentsValue">获取父组件值</button>
  </div>
</template>

<script>
export default {
  name: "Child",
  props:['parentName'],
  data() {
    return {
    };
  },
  methods: {
    getParentsValue(){
      console.log(this.parentName)
    }
  }
}
</script>

2、方法

2.1 父组件调用子组件方法

父组件

<template>
  <div>
    <button @click="clickChildMethodNoParams">调用子组件方法 无参数 </button>
    <button @click="clickChildMethodParams">调用子组件方法 有参数 </button>
    <child ref="child" ></child>
  </div>
</template>

<script>
import Child from './Child.vue'
export default {
  name: "Parent",
  components: {
    Child
  },
  data() {
    return {
    }
  },
  methods: {
    clickChildMethodNoParams(){
      this.$refs.child.childMethod();
    },
    clickChildMethodParams(){
      this.$refs.child.childMethodAddParams(' i am parent ');
    }
  }
}
</script>

子组件

<template>
  <div id="child">
    <p> this is child compoents </p>
  </div>
</template>

<script>
export default {
  name: "Child",
  data() {
    return {
    };
  },
  methods: {
    childMethod(){
      console.log('i am child method')
    },
    childMethodAddParams(param){
      console.log('i am child method ',param)
    }
  }
}
</script>

2.2 子组件调用父组件方法

父组件

<template>
  <div>
    <child ref="child"
           @clickChildMethodNoParams="clickChildMethodNoParams"
           @clickChildMethodParams="clickChildMethodParams"
    ></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  name: "Parent",
  components: {
    Child
  },
  data() {
    return {
    }
  },
  methods: {
    clickChildMethodNoParams(){
      console.log('i am parent')
    },
    clickChildMethodParams(params){
      console.log('i am parent '+ params)
    }
  }
}
</script>

子组件

<template>
  <div id="child">
    <button @click="childParentMethodNoParams">调用父组件方法 无参数 </button>
    <button @click="childParentMethodParams">调用父组件方法 有参数 </button>
    <p> this is child compoents </p>
  </div>
</template>

<script>
export default {
  name: "Child",
  data() {
    return {
    };
  },
  methods: {
    childParentMethodNoParams(){
      this.$emit('clickChildMethodNoParams');
    },
    childParentMethodParams(){
      this.$emit('clickChildMethodParams','hello i am child ');
    }
  }
}
</script>