处理组件的边界情况

parent

parent.vue
<template><div class="parent">parent<child></child></div>
</template>data () {return {title: '获取父组件实例'}},methods: {handle () {console.log(this.title)}}

1.通过$parent获取父元素的data数据
2.使用父组件的方法
3.改变父组件的title值

child.vue<div class="child">child<br>$parent.title：{{ $parent.title }}<br><button @click="$parent.handle">获取 $parent.title</button><button @click="$parent.title = 'Hello $parent.title'">改变 $parent.title</button><grandson></grandson></div>

1.子子级 vue通过 p a r e n t . parent. parent.parent获取父父级data,handle方法,改变title值

grandson.vue
<template><div class="grandson">grandson<br>$parent.$parent.title：{{ $parent.$parent.title }}<br><button @click="$parent.$parent.handle">获取 $parent.$parent.title</button><button @click="$parent.$parent.title = 'Hello $parent.$parent.title'">改变 $parent.$parent.title</button></div>
</template>

child

通过$children获取子元素的data对象与methods方法

parent.vue
<template><div><children1></children1><children2></children2><button @click="getChildren">获取子组件</button></div>
</template><script>
import children1 from './02-children1'
import children2 from './03-children2'
export default {components: {children1,children2},methods: {getChildren () {console.log(this.$children)console.log(this.$children[0].title)console.log(this.$children[1].title)}this.$children[0].handle()this.$children[1].handle()
}

children1.vue
<template><div>children1</div>
</template><script>
export default {data () {return {title: 'children1 获取子组件 - title'}},methods: {handle () {console.log(this.title)}}
}
</script>

children2.vue
<template><div>children1</div>
</template><script>
export default {data () {return {title: 'children1 获取子组件 - title'}},methods: {handle () {console.log(this.title)}}
}
</script>

ref

获取组件的dom对象 this. r e f s . m y t x t 然后调用子组件的方法 f o c u s ( ) 改变子元素的 d a t a 数据 t h i s . refs.mytxt 然后调用子组件的方法focus() 改变子元素的data数据this. refs.mytxt然后调用子组件的方法focus()改变子元素的data数据this.refs.mytxt.value

parent.vue
<template><div><myinput ref="mytxt"></myinput><button @click="focus">获取焦点</button></div>
</template>
<script>
import myinput from './02-myinput'
export default {components: {myinput},methods: {focus () {this.$refs.mytxt.focus()this.$refs.mytxt.value = 'hello'}}
}
</script>

myinput.vue
<template><div><input v-model="value" type="text" ref="txt"></div>
</template>
<script>
export default {data () {return {value: 'default'}},methods: {focus () {this.$refs.txt.focus()}}
}
</script>

provide&inject

//依赖注入,导致组件的耦合变高相当于propsc-props的多次传递
在父组件注册provide
title: this.title,
handle: this.handle

parent.vue
<template><div class="parent">parent<child></child></div>
</template>
<script>
import child from './02-child'
export default {components: {child},provide () {return {title: this.title,handle: this.handle}},data () {return {title: '父组件 provide'}},methods: {handle () {console.log(this.title)}}
}
</script>

子组件接收inject: [‘title’, ‘handle’]
子组件可以调用父组件的方法,改变title的值

child.vue
<template><div class="child">child<br>title：{{ title }}<br><button @click="handle">获取 title</button><button @click="title='xxx'">改变 title</button><grandson></grandson></div>
</template>
<script>
import grandson from './03-grandson'
export default {components: {grandson},inject: ['title', 'handle']
}
</script>

子子组件接收inject: [‘title’, ‘handle’]
子子组件可以调用父组件的方法,改变title的值

grandson.vue
<template><div class="grandson">grandson<br>title：{{ title }}<br><button @click="handle">获取 title</button><button @click="title='yyy'">改变 title</button></div>
</template><script>
export default {inject: ['title', 'handle']
}
</script>

attrs &listener

parent.vue
<template><div><myinputrequiredplaceholder="Enter your username"class="theme-dark"@focus="onFocus"@input="onInput"data-test="test"></myinput><button @click="handle">按钮</button></div>
</template>
<script>
import myinput from './02-myinput'
export default {components: {myinput},methods: {handle () {console.log(this.value)},onFocus (e) {console.log(e)},onInput (e) {console.log(e.target.value)}}
}
</script>

v-bind="$attrs"继承父组件的属性
对子组件设置属性可以直接在父组件写
设置inheritAttrs: false 不设置的话会把父组件的属性都继承到子组件的template的根标签最外层div
$listeners 子组件的一些事件(dom自带的一些事件)emit给父组件

myinput.vue
<template><!--1. 从父组件传给自定义子组件的属性，如果没有 prop 接收会自动设置到子组件内部的最外层标签上如果是 class 和 style 的话，会合并最外层标签的 class 和 style --><!-- <input type="text" class="form-control" :placeholder="placeholder"> --><!--2. 如果子组件中不想继承父组件传入的非 prop 属性，可以使用 inheritAttrs 禁用继承然后通过 v-bind="$attrs" 把外部传入的非 prop 属性设置给希望的标签上但是这不会改变 class 和 style--><!-- <div><input type="text" v-bind="$attrs" class="form-control"></div> --><!--3. 注册事件--><!-- <div><inputtype="text"v-bind="$attrs"class="form-control"@focus="$emit('focus', $event)"@input="$emit('input', $event)"></div> --><!--4. $listeners--><div><inputtype="text"v-bind="$attrs"class="form-control"v-on="$listeners"></div>
</template>
<script>
export default {// props: ['placeholder', 'style', 'class']// props: ['placeholder']inheritAttrs: false
}
</script>

快速原型开发

独立运行组件

链接: 文档说明.

需要vue-cli3.0 以上版本
npm install -g @vue/cli-service-global
vue-serve  如果不指定参数 会默认
main.js , index.js , App.vue
//卸载之前的vue-cli
npm uninstall vue-cli -g
//安装vue/cli 高版本的会出问题vue -V的时候显示cli版本
npm install @vue/cli@3.2.0 -g
vue serve

执行顺序 lifecircle
总结：执行顺序beforeCreate ->inject -> Props -> Methods -> Data -> Computed -> Watch ->provide-> created

vue2-组件化开发相关推荐

【Vue.js 知识量化】组件化开发 + 前端模块化
Vue.js 组件化开发组件化认识组件化注册组件全局组件和局部组件父子组件组件数据父子组件的通信父->子:props 子->父:$emit() 父子组件的访问方式 $chi ...
Vue.js 组件化开发
三.组件化开发 1.1 组件化的实现和使用步骤组件注册步骤解析 1.2 全局组件和局部组件 1.3 父组件和子组件 1.4 注册组件语法糖 1.5 组件模板抽离的写法 1.6 组件数据存放 1.7 ...
Thymeleaf + Vue组件化开发
Thymeleaf 搭配 Vue 完成组件化开发前言一.vue2 1.引入静态文件 2.声明组件二.语法搭配使用vue方法调用th数据前言提示:thymeleaf 固然好,但是 vue 也 ...
Vue3.x全家桶之Vue组件化开发(二)
✍灬更新说明更新时间:2022-1-03 更新内容: Vue2.x 更新至 Vue3.x Demo与文件.截图演示齐全保留了Coderwhy老师Vue2.x的精华部分,添加Vue3.x的内容在V ...
Vue.js教程-组件化开发
Vue.js教程-组件化开发前言 Vue组件化什么是组件化 Vue单页面开发的解释组件化思想组件的使用原理实际开发中的使用-父子组件父子组件传递数据父传子-props用法子传父-th ...
【Vue】Vite 组件化开发
文章目录组件化开发一.组件化开发思想二.Vue 组件的构成 2.1 组件组成结构 2.2 组件 template 节点 2.2.1 在 template 中使用指令 2.2.2 在 templa ...
vue之购物车案例升级版、v-model之lazy、number、trim的使用、fetch和axios、计算属性、Mixins、虚拟dom与diff算法 key的作用及组件化开发
文章目录 1.购物车案例升级版(含价格统计.全选/反选.商品增加减少) 2.v-model之lazy.number.trim的使用 3.fetch和axios 3.1.通过jquery+ajax实现v ...
iOS 的组件化开发
2019独角兽企业重金招聘Python工程师标准>>> 在一个APP开发过程中,如果项目较小且团队人数较少,使用最基本的MVC.MVVM开发就已经足够了,因为维护成本比较低. 但是当 ...
android 登录组件开发,Android组件化开发路由的设计
调研了一下目前的路由框架,ARouter(阿里的),ActivityRouter都使用了apt技术编译时注解,个人想法是一口吃不成胖子,先做个比较实用的. VpRouter路由框架主要应用于组件化开 ...
iOS组件化开发实践
目录: 1.组件化需求来源 2.组件化初识 3.组件化必备的工具使用 4.模块拆分 5.组件工程兼容swift环境 6.组件之间的通讯 7.组件化后的资源加载 8.OC工程底层换swift代码 9.总 ...

vue2-组件化开发

组件化