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 来引用