1.定义组件并引⽤2.⽗组件向⼦组件传值
1.1 什么是组件
Html中有组件,是⼀段可以被复⽤的结构代码Css中有组件,是⼀段可以被复⽤的样式Js中有组件,是⼀段可以被复⽤的功能
Vue中也有组件,指的就是⼀个模块,是⼀个独⽴的,完整的(包含html,css,js等),可以直接 拿来⽤的
1.2 组件特性
组件的实例化对象,跟vue实例化对象⼀样,因此,我们也可以将vue实例化对象看成组件组件间是独⽴的,因此数据要独⽴存储,⽅法要独⽴定义, 彼此间不能共享 。
2.⽗组件向⼦组件传值
2.1 components/Child.vue 定义⼦组件
{{data}}⼦组件内容
2.2 components/Father.vue 定义⽗组件
⽗组件内容
⽗组件显⽰:{{msg}}
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 给⼦组件添加事件及事件处理⽅法、
⽗组件显⽰:{{msg}} @changeMsg='change' >
3.3 测试
点击 \"调⽤⽗组件⽅法\" 就会调⽤
因篇幅问题不能全部显示,请点此查看更多更全内容