vue.js 学习笔记

父组件传递数据给子组件

父组件

<ratingselect :only-content='onlyContent' :desc='desc'></ratingselect>

子组件

props: {       
       onlyContent: {
         type: Boolean,
         default: false
       },
       desc: {
         type: Object,
         default(){
           return {
             all: '所有',
             positive: '满意',
             negative: '不满意'
           };
         }
       }
     }

父组件经过添加属性的方式向子组件传递数据，若是属性名是驼峰命名例如onlyContent,要转换成only-content,子组件经过props接收父组件传过来的数据，而且能够经过type制定数据类型，default定义默认数据

子组件传递数据给父组件

子组件

this.$emit('show-content',this.isOnlyContent);

父组件

<ratings v-on:show-content="ratingTypeSelect"></ratings>
  
  methods:{
        isShowContent(isOnlyContent){
          this.onlyContent = isOnlyContent
          this.$nextTick(function () {
            this.foodScroll.refresh();
          })
        }
  }

子组件经过$emit触发父组件调用子组件监听的的show-content事件执行的ratingTypeSelect的方法，而且传入this.isOnlyContent为参数。

$nextTick回调函数

isShowContent(isOnlyContent){
            this.onlyContent = isOnlyContent
            this.$nextTick(function () {
              this.foodScroll.refresh();
            })
    }

$nextTick是在修改数据，而且dom更新完毕后在执行的一个回调，例如我上面的代码，更改了onlyContent，更改完成后，页面的dom元素会根据更改后的值作出相应的变化，等dom渲染完毕，在执行refresh方法

指令keep-alive

<keep-alive>
    <good :is='curremtView' ></good>
  </keep-alive>

若是把切换出去的组件保留在内存中，能够保留它的状态或避免从新渲染。为此能够添加一个keep-alive指令

让css只在当前组件中起做用

<style scoped></style>

在每个vue组件中均可以定义各自的css，js，若是但愿组件内写的css只对当前组件起做用，只须要在style中写入scoped

$refs绑定dom元素和组件

<td colspan="5" ref="total-prices">总价：{{total}}</td>

在元素或者组件中均可以用ref来绑定组件，在方法里面直接用 this.$refs["total-prices"] 就表示引入这个dom元素或者组件。若是ref名称为驼峰命名或者都是小写，例如 ref="totalPrices" 直接用this.$refs.totalPrices 来引用