学习笔记7-30

使用这些能够减少写vue项目时的代码

1.sync
sync是为了让父组件能够少写一个方法去赋值props的变量
例：父组件

<template>
  <div class="about">
    <h1>我的</h1>
    <h2>全屏</h2>
    <div @click="back()">click me</div>
    <sync :name.sync="name"></sync>
  </div>
</template>
<script>
import sync from '@/components/sync.vue'
export default {
  components:{
    sync
  },
  data() {
    return {
      name:"张麻子"
    }
  }
}
</script>

子组件

<template>
    <div>
        <h2>sync</h2>
        <button @click="changeName">改名</button>
        <div class="test">{{name}}</div>
    </div>
</template>
<script>
export default {
    props:{
        name:{
            type:String,
            dafault:"李雷雷"
        }
    },
    methods:{
        changeName(){
            this.$emit("update:name","王大爷")
        }
    }
}
</script>
<style lang="less" scoped>
    .test{
        width: 200px;
        height: 200px;
        background-color: #58bc58;
    }
</style>

这样子我们就不需要在父组件里面去写一个方法来改变props传过来的name的值，挺好用的。