我的Vu啊（vue 2.0，数据监听，计算属性，组件传参）

提示：个人Vue学习工作总结  （持续更新中如果有不对的地方还请前辈多多指点）

文章目录

• vue 计算属性 computed
• vue  数据监听 wacth

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、什么是计算属性 (computed)

一般用监视后端没有，但是需要的数据前端展示，比如姓名 

     

                              

  let vaue = new vue({

                            el:'#vue',

                           data:{

                               

                                        name:'张三'

                                          computed:{

                                           name () => return    xiang + mig

                                          }

                            }

                })

计算属性的特点可以缓存数据节省资源，但是不可以处理异步加载

计算属性有get 和 set 来进行数据的控制

二、什么是监视属性 (wacth) 监视数据的变化

      

<template>
   <div>
     姓名: {{names}}
     <br>
     <br>
     <br>
     <br>
     <input v-model="names" placeholder="请开始你的表演">
     <br>
     <br>
     <br>
     <br>
     阿黄的年龄: {{Dog.age}}
     <input v-model="Dog.age" placeholder="请开始你的表演">
     <br>
     <br>
     <br>
     <br>
      年龄: {{age}}
     <input v-model="age" placeholder="请开始你的表演">
   </div>
</template>

<script>

import Student from '@/components/Student.vue';

export default {
  name: 'Home',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    Student,
  },
  data() {
    return {
      names: '张三',
      age: 23,
      Dog: {
        name: 'zhangsna',
        age: 30,
      },
    };
  },
  watch: {
    age(newValue, oldValue) {
      console.log(newValue, oldValue);
    },
    'Dog.age': {
      handler(newValue, oldValue) {
        console.log(newValue, oldValue);
      },
    },
    names: {
      // 深度监视
      deep: true,
      // 初始化监视 deep 用于对象或者更深的层级开启后会监视全部
      immediate: true,
      handler(newvVaue, oldValue) {
        // newvalue新的值  oldValue 旧的值
        console.log(newvVaue);
        console.log(oldValue);
      },
    },
  },
  mounted() {
  },

};
</script>

父传子 proper 

子传父亲 emit 但是有很多不同的监视方法例如 ref 和 自定义方法

跨组件 vuebus

父亲组件

<template>
   <div>
          <button @click="getAallValue()"></button>
          <student :age="age"  ref="student"  @sentValue='sentValue' :name="Dog.getname"></student>
   </div>
</template>

<script>

import Student from '@/components/Student.vue';
// import { Datas } from '../data';
export default {
  name: 'Home',
  components: {
    Student,
  },
  data() {
    return {
      age: 23,
      Dog: {
        name: 'zhangsna',
        age: 30,
        getname: () => {
          console.log(this.Dog);
        },
      },
    };
  },
  methods: {
    getAallValue() {
      this.$refs.student.chengname();
    },
    sentValue(value) {
      console.log('valuefff', value);
    },
    getValue() {
      console.log('沧海桑田');
    },
    myVuebus() {
      console.log('跨组件传参');
    },
  },
  created() {
  },
  mounted() {
    // vuebus跨组件传参
    this.$bus.$on('sentValue', this.myVuebus);
    // ref实例接收监视
    this.$refs.student.$on('sentValue', this.sentValue);
    // ref实例监视
    this.$refs.student.$once('sentValue', this.sentValue);
  },
};
</script>

 子组件

<template>
   <div>
     <div>{{name}}</div>
     <div>{{age}}</div>
     <slot :showname="name" name="luchao">我是插槽</slot>
     <div @click="name()">点击提示信息</div>
     <div @click="chengname()">唐僧的爱好</div>
   </div>
</template>

<script>

export default {
  // 数组形式
  // props: ['name', 'age'],
  // 对象形式
  props: {
    name: {
      type: Function,
    },
    age: {
      type: Number,
      default: 0,
      required: true,
    },
  },
  data() {
    return {
      // eslint-disable-next-line vue/no-dupe-keys
      showname: '我不是陆超',
    };
  },
  beforeDestroy() {
    this.$bus.$off('sentValue');
  },
  methods: {
    chengname() {
      console.log('value');
      this.$emit('sentValue', this.showname);
      this.$bus.$emit('sentValue', this.showname);
    },
  },
};
</script>

<style scoped>

</style>

vue bus 核心核心创建 例外可以在appvue里运用原型链进行创建垮组件传参

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
  beforeCreate() {
    Vue.prototype.$bus = this;
  },
}).$mount('#app');