Vue组件传递数据

组件命名

1.字母全小写且必须包含一个连字符 my-componnect

2.使用 kebab-case(短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>

3.使用 PascalCase (驼峰式命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的（非字符串的模板中使用时只有 kebab-case 是有效的)

插槽 slot标签

缓存页面

缓存组件：
    keepAlive实现数据缓存不刷新

<keepAlive>
    <router-view></router-view>
</keepAlive>

组件通讯

组件兄弟传递信息

1. 定义全局

window.EventHub = new Vue();

2.
在组件1methods中的方法发送数据
    EventHub.$emit("hello",this.val);
在组件2的方法mounted中接收数据
    EventHub.$on("hello",res=>{
        this.val = res;
    });

组件 父=>子

1. 在父级的data的return中定义一个变量
     solgan:"welcome to china"

2. 在子组件的props中接收
    props:['solgan'] // 可以是数组或对象

3. 在template中的组件标签上
    <cnp1 v-bind:solgan="solgan"></cnp1>

components:{
    cnp1:{
        name:"cnp1",
        props:['solgan'],

    },
   cnp2:{
        name:"cnp2"
    }
}

组件 子=>父

1.在组件1methods中的方法发送数据
    this.$emit("sloganEvent",this.val);

2.在template中的组件标签上
    <cnp1 v-on:sloganEvent="onSloganEvent"></cnp1>

3.在父组件的methods方法中接收函数信息
    methods:{
        onSloganEvent(val){
            this.msg = val;
        }
    }

prop 父组件传递数据的自定义属性

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件

Prop 验证
propA:{
    type:String,
    required:true,
    default: function () {
    return { message: 'hello' }
  }
}

type:可以是下面的原生构造器

String
Number
Boolean
Function
Object
Array

//type 也可以是一个自定义构造器，使用 instanceof 检测。

自定义事件

//父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件

使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

//如果你想在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on

<my-component v-on:click.native="doTheThing"></my-component>

ref属性 ref="aaa" 节点上 在mounted中 // 找到此节点 console.log(this.$refs.aa)

router-link 跳转

<router-link to="/music/search"></router-link>