# # components

## # 组件传值_props

### # 父与子

> 父传值给子组件

父组件

    <template>
      <div class="thread-section">
        <ul class="thread-list">
          <thread
          :active="5 === 6"
          :phone="phone">
          </thread>
        </ul>
      </div>
    </template>

    <script>
    import Thread from './Thread.vue'
    export default {
      name: 'ThreadSection',
      data(){
        return{
          phone: '15868600329'
        }
      },
      components: { Thread },
    }
    </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

子组件

    <template>
      <li
        class="thread-list-item"
        :class="{ active: active }">
        <div>{{phone}}</div>
      </li>
    </template>

    <script>
    export default {
      name: 'Thread',
      props: {
        active: Boolean,
        phone: Number
      }
    }
    </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17