Vue: Parent component pass value

Vue: Parent component pass value

• prop : A prop is a custom property used by a child component to receive the data passed by the parent component.
• The data of the parent component needs to pass propsthe data to the child component, and the child component needs to explicitly call the props option declaration;

Create static instance

<div id='app'>
    <child msg="ComesFromFather"></child>
</div>

<script>
	Vue.component('child',{
    
    
        // 声明props
        props : ['msg'],
        template : `<span>{
     
     { msg }}</span>`
    })
	
	new Vue({
    
    
        el : "#app"
    })
</script>

Create dynamic instance

<div id="app">
    <div>
      <input v-model="parentMsg">
      <br>
      <child v-bind:message="parentMsg"></child>
    </div>
</div>
 
<script>

    Vue.component('child', {
    
    
      // 声明 props
      props: ['message'],
      // 同样也可以在 vm 实例中像 "this.message" 这样使用
      template: '<span>{
    
    { message }}</span>'
    })

    new Vue({
    
    
      el: '#app',
      data: {
    
    
        parentMsg: '父组件内容'
      }
    })
</script>