【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>