1.

The following two codes have the same output which is ‘yes’. Which one is more preferable performance-wise and why? 

Answer»

The Parent component 

<script>  import Child from './Child.VUE'    export default {    components: {      Child    },    MOUNTED() {      this.$refs.child  }  }  </script>    <template>    <Child ref="child" />  </template> 

The Child component 

export default {    EXPOSE: ['dataTwo', 'methodOne'],    data() {      return {        dataOne: 'foo',        dataTwo: 'bar'      }    },    methods: {      MethodOne() {        /* ... */      },      MethodTwo() {        /* ... */      }    }  } 

The two properties that are FULLY accessible to the parent are 'dataTwo', 'methodOne' (those which are listed in the expose option). Since the other two properties of the child (‘dataOne’, ‘methodTwo’) are not included in the expose option, they will not be accessible to the parent component which is referencing the child. ref is one of Vue’s special attributes which allows us to obtain a specific DOM object’s direct reference or the instance of the child component after it is mounted. In our case, it references the instance of the child component which allows the parent component to access all of its properties unless the expose option is used in the child component. 

The parent component would have full access to all properties of the child if the expose option was not used since ‘ref’ ATTRIBUTE is referencing the instance of the child component. Therefore the expose option is what limits the other properties from being accessed by the parent component. 


Discussion

No Comment Found

Related InterviewSolutions