4. Non-props attribute

An overview of the

When a parent component passes a value to a child component that the child does not receive, vUE treats the value as a property of the outermost div of the child component.

code

<! 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({
    template: ` 
       
 
         
       
 `
  });

  
  // Non-props
  app.component('test', {template: ` 
       

        Hello World! 
       
 `
  })

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

</html>
Copy the code

The results

Stop that from happening

<! 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({
    template: ` 
       
 
         
       
 `
  });

  
  // Non-props
  app.component('test', {// Prevents attributes and values passed by the parent from being attached to the outermost div
    inheritAttrs: false.template: ` 
       

        Hello World! 
       
 `
  })

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

</html>
Copy the code

The results

The outermost div implementation of the child component receives data

Specify a div to receive data from the parent component, otherwise a warning will be raised and none of the divs will receive data from the parent component

<! 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({
    template: `
        <div>
          <test message="Good Bye!" />
        </div>`}); app.component('test',{ template: `<div>Hello World!</div>
        <div v-bind="$attrs">Hello World!</div>
        <div>Hello World!</div>
    `
  })

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

</html>
Copy the code

The results

The outermost div implementations of the child component receive one of the multiple attributes and values passed by the parent component

<! 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({
    template: `
        <div>
          <test message="Good Bye!" content="Brother Liu Bei" />
        </div>`}); // V-bind can also be shortened to app.ponent ('test',{template: '<div v-bind:message="$attrs.message">Hello World!</div>
        <div v-bind:content="$attrs.content">Hello World!</div>
        <div v-bind="$attrs">Hello World!</div>
    `
  })

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

</html>
Copy the code

The results

Gets the properties and values passed by the parent component

<! 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({
    template: `
        <div>
          <test message="Good Bye!" content="Brother Liu Bei" />
        </div>`}); app.component('test',{ mounted(){ console.log(this.$attrs); }, template: `<div v-bind:message="$attrs.message">Hello World!</div>
        <div v-bind:content="$attrs.content">Hello World!</div>
        <div v-bind="$attrs">Hello World!</div>
    `
  })

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

</html>
Copy the code

The results