父组件向子组件传值
1、props传递属性原则,是单向数据流,只允许父向子传值,不允许子操作父的数据。
2、子组件通过props接收传过来的值。父组件向子组件传值,使用props方法,在子组件中定义props数组(接收父组件传过来的值),里面传变量名,父组件通过给这个变量名赋值来实现传值。第一种方法是在html中传值,第二种方法是在data里面动态定义要传的值:
props属性名规则
因为dom元素的属性是不区分大小写的,如果传递的是驼峰形式,就不能正常识别了。
除了标签,其余的都可以使用驼峰
3、props属性值类型,可以是string、number、boolean、arr、obj。
4、在绑定字符串时,正常使用,但是在绑定number和boolean类型是,如果前面不加:绑定符号,会被转为string类型的。
在使用boolean是一样的。
子组件向父组件传值
3、$emit用于触发自定义事件
4、子组件向父组件传值,是通过定义事件来实现的,$emit触发子组件的事件,父组件通过v-on绑定子组件的事件:
5、携带数据:
例:
兄弟组件之间的传值
1、原理图:
2、代码实现:
3、销毁事件:hub.$off('tom-event')