【Vue常用功能】子父组件相互传值

vue1.0

用.sync来解决

父组件中：

<side :my-menu.sync="menu"></side>

<script>
   data(){
      return{
          menu:''
      }
   }
</script>

 

子组件（side.vue）中：

props:['myMenu'],

即可在子组件中使用this.myMenu来获取或更改这个值

vue2.0

不能只单纯的使用.sync，而要加上事件来处理

父组件：

<card-list  :is-card-list.sync="isCardList" @change-type-list = changeType></card-list>

<script>
   data () {
      return {
        isCardList:'',
      }
   },
   methods:{
      changeType (val) {
         this.isCardList = val
         //与参数isCardList有关的操作
      }
   }
</script>

子组件（cardList.vue）中：

props:['isCardList'],

methods:{
   isTemplate () {  
      // 一些相关操作
      this.$emit('change-type-list', val)
      // 此处val为要给事件所传的实参，具体与需求有关
   }
}

在子组件中可以通过this.isCardList来获取或使用它的值，如果要在子组件中做更改并要同步到父组件，需要在this.$emit()中设置更改