vue2一些常用的方法

    <template>
      <div></div>
    </template>
    
    <script>
    export default {
      name: '',

      //父子通讯父组件传入

      //<组件 name="" :obj="{}" :arr="[]"></组件>

    props: {//接收父亲传的值
       name: {

      //单个类型

       type: String,
      // vue props type设置多个类型
        //type: [Number, String], 

       //或者type:Number | String
        default: ""//默认值
        },
    obj: {//对象
        type: Object,
        default: function () {
              return {  }
          }
       },

      arr:{//数组

        type: Array,
        default: function () {
              return []
          }

       }

     },

      data () {
        return {

              message:[],

             watchData:{name:""}

           }
      },

   computed: {//计算属性
    // 计算属性的 getter
    reversedMessage:  () =>{
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
     },

watch: {//监听

//第一种方法

watchData: {
    handler: function() {
        console.log();
    },
    deep: true//开启深度监听
}

//第二种

//监听vuex

//"watchData.name"替换vuex $store.state.xxx
 //监听计算属型

//"watchData.name"替换reversedMessage

'watchData.name'(newValue, oldValue) {
     console.log(newValue);
 }

 

//第三种

    'watchData.name': {
        handler: function() {
            console.log();
        }
    }
}

      created () {},
      mounted () {},
      computed: {},
      watch: {},
      methods: {}
    }
    </script>
    
    <style lang="scss" scoped>
    
    </style>