自定义组件介绍

组件(Component)是Vue.js 最强大的功能之一

组件可以扩展 HTML元素，封装可重用的代码

组件系统让我们可以用独立可复用的小组件来构建大型应用

自定义组件使用

1定义一个children.vue 组件(子组件)

2定义一个parent.vue 组件引入children组件(父组件)

3定义路由，访问parent.vue组件，看看什么效果

父组件向子组件通信

一：父组件向子组件传值

1假设我们想要在子组件children中点击登录获取父组件parent中的用户文本框中的值，实现代码如下:

parent.vue修改后的代码

2在children.vue中，定义props属性来接收父组件parent传过来的值代码如下

二:父组件调用子组件的函数

1在父组件的添加属性ref,ref的值是引入’import children’的children

2在父组件任意方法中加入入下代码:

语法: this.$refs.子组件名称.子组件函数

子组件向父组件通信

一:子组件调用父组件函数

1在父组件中的自定义事件myEve，并绑定父组件任意一个方法，代码如下

2在子组件任意方法中用代码this.$emit(”myEve”)来运行自定义事件myEve

 

二:子组件向父组件传值

如果要把子组件值传到父组件，把子组件代码改成如下

语法: this.$emit("自定义事件名称"，"要传值的数据”）

父组件自定义事件名称对应的函数，添加一个方法参数V，代码如下: