vue 父子组件传参

引用组件时,首先import引入,再注册,最后方可使用。同时注意,如果是驼峰式helloWorld ,在调用时就要转换成 hello-world才能使用。

组件之间的数据交换:

1)父组件向子组件传数据时,可以在父组件的HTML标签添加属性,然后子组件中使用props注册(注意props:['xxx']加引号)后,即可在子组件中使用来自父组件的数据

vue 父子组件传参_第1张图片
Paste_Image.png

可以使用v-on绑定自定义事件名,用于子模板向父模板传递数据

父模板:

child-tell-me-something是父组件绑定的自定义事件

vue 父子组件传参_第2张图片
Paste_Image.png

子模板:

子组件通过$emit('事件名', 传给处理程序的参数)来发布事件,这样父组件监听相应事件的处理程序就可以获取子组件的信息(即,实现子组件向父组件传递信息)。

vue 父子组件传参_第3张图片
Paste_Image.png

你可能感兴趣的:(vue 父子组件传参)