vue-ssr项目笔记

2018-05-10 本文已影响74人琪先生_zZ

1. 删除dist目录

vue-ssr.png

2. 获取子组件的实例

 // 相当于调用了子组件内的vue实例
      console.log(this.$refs.fileInput)

3. watch中手动执行一次

image.png

4. watch监听对象属性的变化

image.png

depp:true 对对象进行深层遍历
也可以写成"obj.a" , 直接对对象的某个属性进行监听

5. watch和computed中尽量不要去改监听的值

6. v-once只执行一次

节点下的数据只会获取一次

<h4 class="pro-deploy-header-title" v-once>{{deployTitle}}</h4>

7. props的传值校验

image.png

8. slot传递数据

image.png

父组件中引入子组件,用子组件传入的数据(可传递多个)

image.png
image.png

9.父组件子组件(多层子组件)的传值 (不推荐使用)

父组件

<template>
  <div>
<childOne></childOne>
  </div>
</template>

<script>
  import childOne from '../components/test/ChildOne'
  export default {
    name: "Parent",
    provide: {
      for: "demo"
    },
    components:{
      childOne
    }
  }

子组件

<template>
  <div>
    {{demo}}
    <childtwo></childtwo>
  </div>
</template>

<script>
  import childtwo from './ChildTwo'
  export default {
    name: "childOne",
    inject: ['for'],
    data() {
      return {
        demo: this.for
      }
    },
    components: {
      childtwo
    }
  }
</script>

孙元素

<template>
  <div>
    {{demo}}
  </div>
</template>

<script>
  export default {
    name: "",
    inject: ['for'],
    data() {
      return {
        demo: this.for
      }
    }
  }
</script>

从上面这个例子可以看出，只要在父组件中调用了，那么在这个父组件生效的生命周期内，所有的子组件都可以调用inject来注入父组件中的值。
缺点: 父组件数据更新无法通知子组件
解决方法:

image.png