Vue：父组件传值

Vue：父组件传值

• prop : prop是一个子组件用来接收父组件传递过来的数据的一个自定义属性。
• 父组件的数据都需要通过props把数据传递给子组件，子组件需要显示地调用props选项声明；

创建静态实例

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

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

创建动态实例

<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>