ToRef and context

Using toRef

The deconstructed property may not exist, and using toRef to give a default value can be implemented in response to future changes;

But it is not recommended to do so, when there is no data can be null, or the default value;

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  const app = Vue.createApp({
    // We imagine that after 2s, the value of name used here will become "big brother Liu Bei".
    template: ` 
       

        age: {{age}}
       
 `.setup(props, context){
      // Add Reactive from vue
      const { reactive, toRef } = Vue;
      // Define a variable nameObj object
      let nameObj = reactive({name: 'zibo'});
      const age = toRef(nameObj, 'age');
      // change the content after 2s
      setTimeout(() = > {
        age.value = 25;
      }, 2000);
      return{
        age
      }
    }
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

Attrs and slots in context

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  // When we use the child component test in the parent component template, we pass the parameters
  const app = Vue.createApp({
    template: ` 
       
        parent
        `}); app.component('test', {
    // template:`
    // 
       

        child
       

    / / `,
    setup(props, context){
      const { h } = Vue;
      const { attrs, slots, emit } = context;
      console.log("Attrs. App.", attrs.app); // None-props property passed by the parent component
      console.log("Slots. The default () :", slots.default()[0].children); // parent
      console.log("Slots. The default () :", slots.default()); // Get the slot content
      // The setup function returns a dummy DOM function without writing template
      return () = > h('div', {}, slots.default()); }});const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

The context of emit

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  // When we use the child component test in the parent component template, we pass the parameters
  const app = Vue.createApp({
    methods: {
      handleClick(){
        console.log("The handleClick event in the parent component was triggered!"); }},template: ` 
       
        parent
        `}); app.component('test', {
    template:'
       

         click my external trigger event 
       
'.setup(props, context){
      const { h } = Vue;
      const { emit } = context;
      // emit is used for events triggered externally by child components
      function handleClick(){
        emit('handleClick');
      }
      return {
        handleClick
      }
    }
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results