vue2系列2-常用指令，组件通信，插槽，事件、计算属性和监听器

vue2系列2-常用指令，组件通信，插槽，事件计算属性和监听器

个人学习和记录，如有错误欢迎指正

---

---

一、vue2常用指令

v-for: 循环数组
v-if：dom节点删除添加
v-else-if ：与v-if配合使用
v-else ：必须与v-if配合使用
v-show：dom节点隐藏显示
v-cloak：样式[v-cloak]：display:none,可以隐藏未解析的模版
v-pre：不要解析该节点
v-text：替换节点的文本内容
v-html：替换节点的html内容包括文本，实际chrom中，为了安全不可以用。
v-once：只解析动态模版一次，数据在变化，不会再次解析模版，用于优化性能
v-for 的优先级比 v-if 更高

二、vue2组件通信

1.父子通信

1、prop
2、$ on绑定$ emit
3、v-model
4、$ refs
5、$ parent
6、$ childen

2.父孙通信

1、$ attrs
2、$ listeners
2、provide和inject

3、兄弟通信

全局事件总线
全部代码如下：
父组件

<template>
  <div id="app">
    我是父组件
    <ChildA @change="getToyBySon" a='我是父组件的a' b="我是父组件的b" ref="c2"></ChildA>
    <ChildB ref="c1" @change="getToyByChild"/>
    <ChildC v-model="inputValue" :name1.sync="name1" :name2.sync="name2"/>
    <button @click="getRef($refs)">获取ref</button><br>
    <button @click="getChild($children)">获取Children</button><br>
    <button @click="func1();func2()">绑定多个事件</button>
  </div>
</template>

<script>
import ChildA from './components/ChildA.vue'
import ChildB from './components/ChildB.vue'
import ChildC from './components/ChildC.vue'
export default {
  name: 'App',
  components: {
    ChildA,
    ChildB,
    ChildC
  },
  data() {
    return {
      msg: 'hhahah',
      inputValue: '我是父元素给的input值',
      name1: '父元素name1',
      name2: '父元素name2'
    }
  },

  provide() {
    return {
      age: '我是父组件传递的age'
    }
  },
  methods:{
    getToyByChild(val) {
      console.log(val)
    },
    getToyBySon(val) {
      console.log(val)
    },
    getRef(refs) {
      console.log(refs)
      refs.c1.name= '哈哈哈哈哈哈哈哈'
    },
    getChild(child) {
      console.log(child)
    },
    func1() {
      console.log('func1')
    },
    func2() {
      console.log('func2')
    }
  }
}
</script>

子组件A

<template>
   <div>
      <p @click="sendToy" >child2</p>
      <SonA v-bind="$attrs" v-on="$listeners"></SonA>
      {{a}}
   </div>
</template>
<script>
import SonA from './SonA'
export default {
   name: 'ChildA',
   components: {
      SonA
   },
   mixins: [],
   props: ['a'],
   data() {
     return {

     }
   },
   computed: {

   },
   created() {
      this.$bus.$on("getCar",this.getCar)
   },
   beforeDestroy() {
      this.$bus.$off('getCar')
   },
   watch: {

   },
   mounted() {

   },
   methods: {
      getCar(val) {
         console.log(val)
      },
      sendToy() {
         this.$emit("change", '洋娃娃2')
      }
   }
};
</script>

子组件B

<template>
  <div class="child">
    我是子组件B
    {{name}}
    <h1>{{ value }}</h1>
    <h1>{{ msg }}</h1>
    <button @click="sendCar">给兄弟传递数据</button>

  </div>
</template>

<script>
export default {
  name: 'ChildB',
  props: {
    msg: String,
    value: String,
  },
  data() {
    return {
      name:'子组件childB的名字'
    }
  },
  methods: {
    getToy(val) {
      console.log(val)
    },
    sendCar() {
      this.$bus.$emit("getCar", "我是子组件B给的car")
    }
  },
}
</script>

C组件

<template>
<div>
  我是子组件C专门演示v-model
  <!-- 基础用法
  <input type="text" :value="value"> -->
  <button @click="$emit('demoEvent','我把v-model改喽')">{{demoProp}}</button>
  <button @click="$emit('update:name1','我把name1改喽')">{{name1}}</button>
  <button @click="$emit('update:name2','我把name2改喽')">{{name2}}</button>
</div>
</template>

<script>
export default {
  name: 'ChildC',
  // props:['value'],// 基础用法
  model: {
    prop:'demoProp',
    event:'demoEvent'
  },
  props: ['demoProp','name1','name2']
}
</script>

<style>

</style>

孙组件

<template>
  <div>
    我是孙组件
    <button @click="getParent($parent)">获取父组件</button>
    <p>{{b}}</p>
    {{age}}
    <button @click="sendToy">给父组件传递数据</button>
  </div>
</template>

<script>
export default {
  props: ['b'],
  methods: {
    getParent(parent) {
      console.log(parent)
    },
    sendToy() {
        this.$emit("change", '我是孙组件的洋娃娃')
    },

  },
  inject: ['age']
}
</script>

main.js

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

三、插槽

1、默认插槽
2、具名插槽
3、作用域插槽
父组件

<child-d>
  <div>我是默认插槽</div>
   <template v-slot:content>
     <div>
       我是插槽content内容
     </div>
   </template>
   <template #footer>
     <div>
       我是插槽footer的内容
     </div>
   </template>
   <template #user="slotData">
     我是作用域插槽提供的内容{{slotData}}
   </template>
 </child-d>

子组件childD

<template>
<div>
  我是子组件专门演示插槽
  <p>
    <slot name="content"></slot>
    <slot></slot>
    <slot name="footer"></slot>
    <slot :user="user" name="user"></slot>
  </p>
</div>
</template>
data() {
  return {
     user: {
       name: '张三'
     }
   }
 }

四、事件，计算属性和监听器

计算属性如果有依赖其他数据比如A，数据A变了，计算属性会getter会自动执行。计算属性定义的变量，可以在模版中直接使用。
watch里可以进行异步操作，计算属性不可以。
wach和计算属性，都是对变量、
除此之外的情况，可以用方法。

<template>
{{num}}@@@{{bigNum}}
<button @click="changeNum">改变bigNum</button>
</template>
data() {
   return {
     num:10
   }
 },
 methods: {
	changeNum() {
      this.bigNum = 2000
    }
},
computed:{
    // 函数简写getter
    // bigNum(){
    //   return num*10
    // },
    bigNum: {
      get() {
        return this.num*10
      },
      set(value) {
        this.num =  value/10
      }
    }
  },
  watch:{
    // 函数简单写法，没有深度监视
    // bigNum(newValue,oldValue) {
    //   console.log(newValue,oldValue)
    // },
    // 对象写法，
    bigNum:{
      deep:true,// 深度监视，
      handler:function (newValue, oldValue) {
        setTimeout(()=>{
          console.log(newValue,oldValue)
        },2000)
      },
      immediate:true //watch开始立即执行handler
    }
  }