美橙互联 网站备案深圳属于哪个省

当前位置： 首页 > news >正文

美橙互联 网站备案,深圳属于哪个省,为企业制定网络营销方案,做的网站怎么让别人也能看到目录 一、组件通信简介1.什么是组件通信#xff1f;2.组件之间如何通信3.组件关系分类4.通信解决方案5.父子通信流程6.父向子通信代码示例7.子向父通信代码示例8.总结 二、props1.Props 定义2.Props 作用3.特点4.代码演示 三、props校验1.思考2.作用3.语法4.代码演示 四、prop… 目录 一、组件通信简介1.什么是组件通信2.组件之间如何通信3.组件关系分类4.通信解决方案5.父子通信流程6.父向子通信代码示例7.子向父通信代码示例8.总结 二、props1.Props 定义2.Props 作用3.特点4.代码演示 三、props校验1.思考2.作用3.语法4.代码演示 四、props校验完整写法1.语法2.代码实例3.注意 五、propsdata、单向数据流1.共同点2.区别3.单向数据流4.代码演示5.口诀 六、非父子通信-event bus 事件总线1.作用2.步骤3.代码示例4.总结 七、非父子通信-provideinject1.作用2.场景3.语法4.注意 八、sync修饰符1.作用2.场景3.本质4.语法5.代码示例6.总结 九、ref和\(refs1.作用2.特点3.语法4.注意5.代码示例 十、异步更新 \)nextTick1.需求2.代码实现3.问题4.解决方案 十一、总结1.Props and Events (用于父子组件通信)2.Event Bus (用于跨组件通信)3.Vuex (用于大型应用状态管理)4. Provide / Inject(用于跨多个层级的组件通信)5. Refs (用于访问子组件实例或DOM) 一、组件通信简介 1.什么是组件通信 组件通信就是指组件与组件之间的数据传递 组件的数据是独立的无法直接访问其他组件的数据。想使用其他组件的数据就需要组件通信 2.组件之间如何通信 思考 组件之间有哪些关系对应的组件通信方案有哪几类 3.组件关系分类 父子关系非父子关系 4.通信解决方案 5.父子通信流程 父组件通过 props 将数据传递给子组件子组件利用 \(emit 通知父组件修改更新 6.父向子通信代码示例 父组件通过props将数据传递给子组件 父组件App.vue templatediv classapp styleborder: 3px solid #000; margin: 10px我是APP组件 Son :titlemyTitle/Son/div /templatescript import Son from ./components/Son.vue export default {name: App,data() {return {myTitle: gogo,}},components: {Son,}, } /scriptstyle /style子组件Son.vue templatediv classson styleborder:3px solid #000;margin:10px我是Son组件-{{title}}/div /templatescript export default {name: Son-Child,//子组件通过此方式接收props:[title] } /scriptstyle/style父向子传值步骤 给子组件以添加属性的方式传值子组件内部通过props接收模板中直接使用 props接收的值 7.子向父通信代码示例 子组件利用 \)emit 通知父组件进行修改更新 父组件App.vue templatediv classapp styleborder: 3px solid #000; margin: 10px我是APP组件 Son :titlemyTitle changeTitlehandleChange/Son/div /templatescript import Son from ./components/Son.vue export default {name: App,data() {return {myTitle: gogo,}},methods:{handleChange(title){this.myTitle title}},components: {Son,}, } /scriptstyle /style子组件Son.vue templatediv classson styleborder:3px solid #000;margin:10px我是Son组件-{{title}}button clickchangeTitle修改标题/button/div /templatescript export default {name: Son-Child,//子组件通过此方式接收props:[title],methods:{changeTitle(){this.\(emit(changeTitle,)}}, } /scriptstyle/style子向父传值步骤 \)emit触发事件给父组件发送消息通知父组件监听\(emit触发的事件提供处理函数在函数的性参中获取传过来的参数 8.总结 组件关系分类有哪两种父子组件通信的流程是什么 父向子子向父 组件通信方式 二、props 1.Props 定义 组件上 注册的一些 自定义属性 2.Props 作用 向子组件传递数据 3.特点 可以 传递 任意数量 的prop可以 传递 任意类型 的prop 4.代码演示 父组件App.vue templatediv classappUserInfo:usernameusername:ageage:isSingleisSingle:carcar:hobbyhobby/UserInfo/div /templatescript import UserInfo from ./components/UserInfo.vue export default {data() {return {username: 小帅,age: 28,isSingle: true,car: {brand: 宝马,},hobby: [篮球, 足球, 羽毛球],}},components: {UserInfo,}, } /scriptstyle /style子组件UserInfo.vue templatediv classuserinfoh3我是个人信息组件/h3div姓名/divdiv年龄/divdiv是否单身/divdiv座驾/divdiv兴趣爱好/div/div /templatescript export default {} /scriptstyle .userinfo {width: 300px;border: 3px solid #000;padding: 20px; } .userinfo div {margin: 20px 10px; } /style三、props校验 1.思考 组件的props可以乱传吗 2.作用 为组件的 prop 指定验证要求不符合要求控制台就会有错误提示 → 帮助开发者快速发现错误 3.语法 类型校验非空校验默认值自定义校验 4.代码演示 App.vue templatediv classappBaseProgress :wwidth/BaseProgress/div /templatescript import BaseProgress from ./components/BaseProgress.vue export default {data() {return {width: 30,}},components: {BaseProgress,}, } /scriptstyle /styleBaseProgress.vue templatediv classbase-progressdiv classinner :style{ width: w % }span{{ w }}%/span/div/div /templatescript export default {props: [w], } /scriptstyle scoped .base-progress {height: 26px;width: 400px;border-radius: 15px;background-color: #272425;border: 3px solid #272425;box-sizing: border-box;margin-bottom: 30px; } .inner {position: relative;background: #379bff;border-radius: 15px;height: 25px;box-sizing: border-box;left: -3px;top: -2px; } .inner span {position: absolute;right: 0;top: 26px; } /style四、props校验完整写法 1.语法 props: {校验的属性名: {type: 类型, // Number String Boolean ...required: true, // 是否必填default: 默认值, // 默认值validator (value) {// 自定义校验逻辑return 是否通过校验}} },2.代码实例 script export default {// 完整写法类型、默认值、非空、自定义校验props: {w: {type: Number,//required: true,default: 0,validator(val) {// console.log(val)if (val 100 || val 0) {console.error(传入的范围必须是0-100之间)return false} else {return true}},},}, } /script3.注意 1.default和required一般不同时写因为当时必填项时肯定是有值的 2.default后面如果是简单类型的值可以直接写默认。如果是复杂类型的值则需要以函数的形式return一个默认值 五、propsdata、单向数据流 1.共同点 都可以给组件提供数据 2.区别 data 的数据是自己的 → 随便改prop 的数据是外部的 → 不能直接改要遵循 单向数据流 3.单向数据流 父级props 的数据更新会向下流动影响子组件。这个数据流动是单向的 4.代码演示 App.vue templatediv classappBaseCount/BaseCount/div /templatescript import BaseCount from ./components/BaseCount.vue export default {components:{BaseCount},data(){}, } /scriptstyle/styleBaseCount.vue templatediv classbase-countbutton clickcount---/buttonspan{{ count }}/spanbutton clickcount/button/div /templatescript export default {// 1.自己的数据随便修改 谁的数据 谁负责data () {return {count: 100,}},// 2.外部传过来的数据 不能随便修改//props: {// count: {// type: Number,// }, //} } /scriptstyle .base-count {margin: 20px; } /style5.口诀 谁的数据谁负责 六、非父子通信-event bus 事件总线 1.作用 非父子组件之间进行简易消息传递。(复杂场景→ Vuex) 2.步骤 1.创建一个都能访问的事件总线 空Vue实例 import Vue from vue const Bus new Vue() export default Bus2.A组件接受方监听Bus的 \)on事件 created () {Bus.\(on(sendMsg, (msg) {this.msg msg}) }3.B组件发送方触发Bus的\)emit事件 Bus.\(emit(sendMsg, 这是一个消息)3.代码示例 EventBus.js import Vue from vue const Bus new Vue() export default BusBaseA.vue(接受方) templatediv classbase-a我是A组件接受方p{{msg}}/p /div /templatescript import Bus from ../utils/EventBus export default {data() {return {msg: ,}},created() {Bus.\)on(sendMsg, (msg) {// console.log(msg)this.msg msg})}, } /scriptstyle scoped .base-a {width: 200px;height: 200px;border: 3px solid #000;border-radius: 3px;margin: 10px; } /styleBaseB.vue(发送方) templatediv classbase-bdiv我是B组件发布方/divbutton clicksendMsgFn发送消息/button/div /templatescript import Bus from ../utils/EventBus export default {methods: {sendMsgFn() {Bus.$emit(sendMsg, 今天天气不错适合旅游)},}, } /scriptstyle scoped .base-b {width: 200px;height: 200px;border: 3px solid #000;border-radius: 3px;margin: 10px; } /styleApp.vue templatediv classappBaseA/BaseABaseB/BaseB /div /templatescript import BaseA from ./components/BaseA.vue import BaseB from ./components/BaseB.vue export default {components:{BaseA,BaseB} } /scriptstyle/style4.总结 1.非父子组件传值借助什么 2.什么是事件总线 3.发送方应该调用事件总线的哪个方法 4.接收方应该调用事件总线的哪个方法 5.一个组件发送数据可不可以被多个组件接收 七、非父子通信-provideinject 1.作用 跨层级共享数据 2.场景 3.语法 父组件 provide提供数据 export default {provide () {return {// 普通类型【非响应式】color: this.color, // 复杂类型【响应式】userInfo: this.userInfo, }} }2.子/孙组件 inject获取数据 export default {inject: [color,userInfo],created () {console.log(this.color, this.userInfo)} }4.注意 provide提供的简单类型的数据不是响应式的复杂类型数据是响应式。推荐提供复杂类型数据子/孙组件通过inject获取的数据不能在自身组件内修改 八、sync修饰符 1.作用 可以实现 子组件 与 父组件数据 的 双向绑定简化代码 简单理解子组件可以修改父组件传过来的props值 2.场景 封装弹框类的基础组件 visible属性 true显示 false隐藏 3.本质 .sync修饰符 就是 :属性名 和 update:属性名 合写 4.语法 父组件 //.sync写法

BaseDialog :visible.syncisShow /

//完整写法 BaseDialog :visibleisShow update:visibleisShow \(event /子组件 props: {visible: Boolean },this.\)emit(update:visible, false)5.代码示例 App.vue templatediv classappbutton clickopenDialog退出按钮/buttonBaseDialog :isShowisShow/BaseDialog/div /templatescript import BaseDialog from ./components/BaseDialog.vue export default {data() {return {isShow: false,}},components: {BaseDialog,}, } /scriptstyle /styleBaseDialog.vue templatediv classbase-dialog-wrap v-showisShowdiv classbase-dialogdiv classtitleh3温馨提示/h3button classclosex/button/divdiv classcontentp你确认要退出本系统么/p/divdiv classfooterbutton确认/buttonbutton取消/button/div/div/div /templatescript export default {props: {isShow: Boolean,} } /scriptstyle scoped .base-dialog-wrap {width: 300px;height: 200px;box-shadow: 2px 2px 2px 2px #ccc;position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);padding: 0 10px; } .base-dialog .title {display: flex;justify-content: space-between;align-items: center;border-bottom: 2px solid #000; } .base-dialog .content {margin-top: 38px; } .base-dialog .title .close {width: 20px;height: 20px;cursor: pointer;line-height: 10px; } .footer {display: flex;justify-content: flex-end;margin-top: 26px; } .footer button {width: 80px;height: 40px; } .footer button:nth-child(1) {margin-right: 10px;cursor: pointer; } /style6.总结 1.父组件如果想让子组件修改传过去的值 必须加什么修饰符 2.子组件要修改父组件的props值 必须使用什么语法 九、ref和\(refs 1.作用 利用ref 和 \)refs 可以用于 获取 dom 元素 或 组件实例 2.特点 查找范围 → 当前组件内(更精确稳定) 3.语法 1.给要获取的盒子添加ref属性 div refchartRef我是渲染图表的容器/div2.获取时通过 \(refs获取 this.\)refs.chartRef 获取 mounted () {console.log(this.\(refs.chartRef) }4.注意 之前只用document.querySelect(‘.box’) 获取的是整个页面中的盒子 5.代码示例 App.vue templatediv classappBaseChart/BaseChart/div /templatescript import BaseChart from ./components/BaseChart.vue export default {components:{BaseChart} } /scriptstyle /styleBaseChart.vue templatediv classbase-chart-box refbaseChartBox子组件/div /templatescript // yarn add echarts 或者 npm i echarts import * as echarts from echartsexport default {mounted() {// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.querySelect(.base-chart-box))// 绘制图表myChart.setOption({title: {text: ECharts 入门示例,},tooltip: {},xAxis: {data: [衬衫, 羊毛衫, 雪纺衫, 裤子, 高跟鞋, 袜子],},yAxis: {},series: [{name: 销量,type: bar,data: [5, 20, 36, 10, 10, 20],},],})}, } /scriptstyle scoped .base-chart-box {width: 400px;height: 300px;border: 3px solid #000;border-radius: 6px; } /style十、异步更新 \)nextTick 1.需求 编辑标题, 编辑框自动聚焦 点击编辑显示编辑框让编辑框立刻获取焦点 2.代码实现 templatediv classappdiv v-ifisShowEditinput typetext v-modeleditValue refinp /button确认/button/divdiv v-elsespan{{ title }}/spanbutton clickeditFn编辑/button/div/div /templatescript export default {data() {return {title: 大标题,isShowEdit: false,editValue: ,}},methods: {editFn() {// 显示输入框this.isShowEdit true // 获取焦点this.\(refs.inp.focus() } }, } /script 3.问题 “显示之后”立刻获取焦点是不能成功的 原因Vue 是异步更新DOM (提升性能) 4.解决方案 \)nextTick等 DOM更新后,才会触发执行此方法里的函数体 语法: this.\(nextTick(函数体) this.\)nextTick(() {this.\(refs.inp.focus() })注意\)nextTick 内的函数体 一定是箭头函数这样才能让函数内部的this指向Vue实例 十一、总结 在Vue.js中组件之间的通信是一个重要的概念因为它允许不同组件共享状态和行为。Vue提供了多种方式来实现组件之间的通信这取决于组件之间的关系父子组件、兄弟组件等以及应用规模。常见的Vue组件通信方式 1.Props and Events (用于父子组件通信) Props: 父组件可以通过props向子组件传递数据。子组件需要声明它接受的props。!– 父组件 – templateChildComponent :some-propvalue / /template!– 子组件 – template!– 使用some-prop – /templatescript export default {props: [someProp] } /scriptEvents: 子组件可以通过事件向父组件发送消息。这通常通过this.\(emit方法实现。!-- 子组件 -- script export default {methods: {handleClick() {this.\)emit(custom-event, some value);}} } /script!– 父组件监听这个事件 – templateChildComponent custom-eventhandleCustomEvent / /template2.Event Bus (用于跨组件通信) Event Bus是一个空Vue实例用作中央事件总线通过它你可以发出事件和监听事件。 // event-bus.js import Vue from vue; const EventBus new Vue(); export default EventBus;// 发送事件 EventBus.\(emit(my-event, data);// 监听事件 EventBus.\)on(my-event, function(data) {// handle event });3.Vuex (用于大型应用状态管理) Vuex是专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态并以相应的规则保证状态以一种可预测的方式发生变化。本文并没有进行介绍。 templatediv{{ count }}/divbutton clickincrementIncrement/button /templatescript import { mapState, mapMutations } from vuex;export default {computed: {…mapState([count])},methods: {…mapMutations([increment])} } /script4. Provide / Inject(用于跨多个层级的组件通信) provide和inject是配对使用的允许一个祖先组件定义可以被其所有子孙组件使用的property而无需将其作为prop逐层传递。 // 祖先组件 provide() {return {providedValue: some value}; }// 子孙组件中 inject: [providedValue]5. Refs (用于访问子组件实例或DOM) 可以使用refs给子组件或DOM元素设置一个引用标识在JavaScript中通过this.\(refs.refName访问。 templateChildComponent refchild /button clickaccessChildAccess Child/button /templatescript export default {methods: {accessChild() {this.\)refs.child.someMethod();}} } /script在选择合适的通信方式时应考虑应用的规模、组件结构及未来的可维护性。对于小至中等规模的应用通常建议先使用Props和Events而对于更大、更复杂的应用考虑使用Vuex或类似的状态管理库。