vue父子组件传值

父传子:props

1.在子组件的props标签里定义接收父组件数据的变量的类型，默认值等

2.在子组件标签里动态绑定父组件中的值

<div id="app">
    <cpn :cfile = 'File'></cpn><!--子组件用的时候传数据-->
  </div>

  <template id="cpn">
    <div>
      <ul>
        <li v-for = 'item in cfile'>{{item}}</li>
        <li v-for = 'item in cmovies'>{{item}}</li>
      </ul>
    </div>
  </template>

  <script src="../js/vue.js"></script>
  <script>
    //父传子：props
    const cpn = {
      template: '#cpn',
      //props: ['cfile','cmovies']
      props: {
        //1.类型限制
        //cmovies: Arry
        //2.提供默认值
        cmovies: {
          type: Array,
          //默认值
          default() {
            return ['樱桃丸子','大头儿子小头爸爸']
          },
        },
        cfile: {
          required: true //必须的，必要的，在使用cpn组件的时候，不传cfile就会报错
        } 
      }  
    }
    const app = new Vue({
      el:'#app',
      data:{
        movies:['海贼王','火影忍者','妖精的尾巴'],
        File:['ff','kk']
      },
      components: {
        cpn
      }
    })
  </script>

子传父：$emit()自定义事件

1.子组件发射事件和要传递的数据

2. 在子组件标签里使用发射事件

3.在父组件中定义发射事件，接收到数据

  <!--父组件模板-->
  <div id="app">
    <cpn @item-click = 'cpnClick'></cpn>
  </div>

  <!--子组件模板-->
  <template id="cpn">
    <div>
      <button v-for='item in categorige'
              @click='btnClick(item)'>
              {{item.name}}</button>
    </div>
  </template>

  <script src="../js/vue.js"></script>
  <script>
    //1.子组件
    const cpn = {
      template: '#cpn',
      data() {
        return {
          categorige: [
            {id:'a',name:'热门推荐'},
            {id:'b',name:'手机数码'},
            {id:'c',name:'家用电器'}
          ]
        }
      },
      methods: {
        btnClick(item) {
          //发射事件：自定义事件
          this.$emit('item-click',item)
        }
      }
    }

    //2.父组件
    const app = new Vue({
      el:'#app',
      data: {

      },
      components: {
        cpn
      },
      methods: {
        cpnClick(item) {
          console.log('cpnClick',item)
        }
      }
    })
  </script>