您的当前位置:首页正文

组件定义——精选推荐

2020-11-23 来源:易榕旅网
组件定义

1.定义组件并引⽤2.⽗组件向⼦组件传值

1.1 什么是组件

Html中有组件,是⼀段可以被复⽤的结构代码Css中有组件,是⼀段可以被复⽤的样式Js中有组件,是⼀段可以被复⽤的功能

Vue中也有组件,指的就是⼀个模块,是⼀个独⽴的,完整的(包含html,css,js等),可以直接 拿来⽤的

1.2 组件特性

组件的实例化对象,跟vue实例化对象⼀样,因此,我们也可以将vue实例化对象看成组件组件间是独⽴的,因此数据要独⽴存储,⽅法要独⽴定义, 彼此间不能共享 。

  

2.⽗组件向⼦组件传值

2.1 components/Child.vue 定义⼦组件

2.2 components/Father.vue 定义⽗组件

2.3 router/index.js 中注册路由

import Father from '@/components/Father' // @修饰符指的是 src⽬录export default new Router({  routes: [

    { path: '/component', name: 'Father', component: Father },  ]})

2.4 测试

⼦组件中可以通过 定义 props 属性来接收⽗组件的数据

3.⼦组件向⽗组件传值

3.1 components/Child.vue ⼦组件通过触发⽅法, 向⽗组件传值

3.2 components/Father.vue 给⼦组件添加事件及事件处理⽅法、

3.3 测试

点击 \"调⽤⽗组件⽅法\" 就会调⽤

因篇幅问题不能全部显示,请点此查看更多更全内容