Vue小知识点汇总

1. 父组件触发子组件事件

父组件：

<template>
    <div>
        <my-child abcClick="sayHello"></my-child>
    </div>
</template>

<script>
export default {
    method: {
        sayHello(Num,Str) {
            alert('hello world~~' + Num + Str)
        }
    }
}
</script>

子组件：

<template>
    <div>
        <!--子组件封装一个按钮-->
        <button @click="childClick"></button>
    </div>
</template>

<script>
export default {
    data: {
        return{
            myNum: 456,
            myStr: 'haha'
        }
    },
    method: {
        childClick() {
            this.$emit('abcClick', this.myNum, this.myStr)
        }
    }
}
</script>

Vue自定义事件是为组件间通信设计，核心就是通过$emit来触发自定义事件（不需要注册），并且传值出去。

vm.$emit(eventName,[…args])

2. 父组件向子组件传值

1.创建子组件，在src/components/文件夹下新建一个Child.vue

2.Child.vue的中创建props，然后创建一个名为message的属性

3.更加常用的是对传递的属性message的值进行v-bind动态绑定。在template中加入child标签，标签中添加message属性并赋值

3. 子组件向父组件传值

1.在子组件中创建一个按钮，给按钮绑定一个点击事件

2.在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

4. 子组件上绑定点击事件等原生事件

  在父组件中给自定义子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，事件是无法触发的。
  自定义组件想要触发事件必须加. native 例如：@click.nativie=“change”。普通元素上不能加.native，否则无法触发事件。