父子組件值、方法引用

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>

測(cè)試結(jié)果在控制臺(tái)查看

1.2 子組件獲取父組件值

方式1：

props: ['parentName']

方式2：

props: {
  parentName: String //這樣可以指定傳入的類型，如果類型不對(duì)，會(huì)警告
}

方式3：

props: {
    msgVal: {
      type: String, //指定傳入的類型
      //type 也可以是一個(gè)自定義構(gòu)造器函數(shù)，使用 instanceof 檢測(cè)。
      default: '' //這樣可以指定默認(rèn)的值
    }
}

注意：props 會(huì)在組件實(shí)例創(chuàng)建之前進(jìn)行校驗(yàn)，所以在 default 或 validator 函數(shù)里，
諸如 data、computed 或 methods 等實(shí)例屬性還無法使用

父組件

<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 父組件調(diào)用子組件方法

父組件

<template>
  <div>
    <button @click="clickChildMethodNoParams">調(diào)用子組件方法 無參數(shù) </button>
    <button @click="clickChildMethodParams">調(diào)用子組件方法 有參數(shù) </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 子組件調(diào)用父組件方法

父組件

<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">調(diào)用父組件方法 無參數(shù) </button>
    <button @click="childParentMethodParams">調(diào)用父組件方法 有參數(shù) </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>