vue transmission parameters used props

Typically, the parent template assembly comprising a subassembly, the forward transfer to the parent component or parameter data to the subassembly, the subassembly is received to render different content depending on different parameters, or perform operations. This process forward transfer of the data is achieved by props.

In assembly, the subassembly using props required to declare the data received from the parent component.
However, the parent can not pass data to the component subassembly.
Note that:
in the js objects and arrays are reference types, pointing to the same memory space, it is an object and an array props, New York changes will affect the parent member in the sub-assembly.

Then he wrote a demo passed
parent components

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld  :message1="messageToHelloWorld"></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  data() {
    return {
      messageToHelloWorld:'我是父组件向下传递的信息'
    }
  },
  components: {
    HelloWorld
  }
}
</script>

Sub-assemblies

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Linkssss</h2>
    <h3>{{ message1 }}</h3>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: ['message1'],
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

Businesses, verification is relatively common components:

Guess you like

Origin www.cnblogs.com/whyaza/p/11528020.html