父亲向子组件传值

父亲向子组件传值

+ 步骤

• 既然父向子传值，肯定有必备的条件

• 父组件 ===> 1. 调用子组件 2. 注册局部组件， 3. 注册的局部组件用来传值给儿子

  // 父亲调用儿子的组件
  import son from './components/son'
  
  // 父亲
  export default {
      name:'Father',
      data(){
          return {
              data:[
                  {title:"hihi"}
              ]
          }  //return 
      },  //data
      
      // 注册局部组件 ，类似于把儿子的组件template引用来重新命名
      components:{
          "son":son
      }
  }
  
  

  3. 注册的局部组件用来传值 ----在引用的标签上给子组件传值

     <son v-bind:data="data" ></son>
     

• 子组件 ---->子组件接受并使用

1. 子组件要接受 父组件传来的值 props接受

   ```javascript
   export default {
         props: ["son"]
       }```
   

   2. 接下来，子组件就可以正常使用父亲传来的值了

    ```html
    <template>
        <div>
            {{data}}
        </div>
    </template>