vue2.0使用记录

父组件给子组件传值【props】

1.首先在父组件的script标签中引入子组件

import Children from './Children'

2.在template内引入子组件

<Children></Children>

3.将要传递的参数写在Children里

<Children
  :parameterName1="parameterVal1"      <!--注意：parameterName是子组件要接受的参数名，要和子组件中props中的对象名对应-->
  :parameterName2="parameterVal2"    
  ...
>
</Children>

4.然后在子组件中使用props接受

//html
<div :title="parameterName1">{{parameterName1}}</div>
// js
props:{
    parameterName1:{
        type:String,
        default:''    
    },
    parameterName2:{
        type:Number,  //期待接收的数据类型，如果类型传错，vue将抛出异常
        default:''    
    }
},
created() {
    console.log(this.parameterName1)  //可以在生命周期钩子中直接使用
}，
methods:{
    fun:function(){
      console.log(this.parameterName2)  //可以在生命周期钩子中直接使用
    }
}

子组件给父组件传值【$emit】

1.首先在父组件内自定义一个事件

//html
<Children @clickItem="backList"></Children>    <!--clickItem为自定义的事件名-->

//js
backList:function (item) {  //item为子组件传过来的数据
    this.showChild = item;
    console.log(item);    //true
}

2.然后在子组件内使用$emit来触发父组件中的自定义方法

//html
<button @click="back(true)">点我一下试试</button>  //back方法内的参数‘true’是要传递给父组件的数据

//js
back:function (isShow) {
  this.$emit('clickItem',isShow);  //注意：第一个参数必须是父组件中自定义的事件名（必须保持一直），第二个参数为子组件要给父组件传递的参数
}

路由跳转传参【params】

this.$router.push({
    path: '/play',
    name: 'Play',
    params:{
        songmid:this.songmid,
        songs:this.songs
    }
})

接受路由参数【$route】

this.$route.params.songmid;  //注意是$route 而不是$router ; 添加路由的时候才用$router

slot

单个slot

1.首先在子组件内设定slot标签

<template>
  <slot>占个坑先</slot>
</template>

2.然后在父组件内引入子组件

<Children></Children>  <!--输出：占个坑先-->    注意：slot可以在父组件内缺省，缺省的话就是使用子组件内slot的值

<Children>
  <span>这个坑归父组件使用了</span>  <!--输出：这个坑归父组件使用了-->
</Children>

具名slot

1.首先在子组件内设定slot标签,并且slot标签上设定具体的name属性

<template>
  <slot name="keng">占个坑先</slot>
</template>

2.然后在父组件内引入子组件

<Children>
  <span :slot="keng">这个坑归父组件使用了</span>  <!--输出：这个坑归父组件使用了-->  注意：span标签的slot属性必须写，而且属性值必须要和子组件内slot的name值一样
</Children>