Kofe_Chen的博客

为了让组件可以组合，需要一种方式来 混合父组件的内容与子组件自己的模板。—> 内容分发Vue 实现了一个内容分发 API，用特殊的 slot 元素作为原始内容的插槽。编译的作用域在深入内容分发 API 之前，需要先明确各个内容在哪个作用域内编译<div id="app"> <child-component v-show="childshow"></c...

组件关系分为父子组件通信、兄弟组件通信和跨级组件通信自定义事件–子组件给父组件传递数据使用 v-on 除了监听 DOM 事件外，还可以用于组件之间的自定义事件JS 的设计模式–观察者模式，有dispatchEvent 和 addEventListener 两个方法，Vue 组件也有与之类似的一套模式，子组件用 $emit 来触发事件，父组件用 $on() 来监听子组件事件。步骤：自定义...

单向数据流通过 props 传递数据是单向的，父组件数据变化会传递给子组件，而反过来不行。目的：尽可能将父子组件解稿，避免子组件无意中修改了父组件的状态。应用场景：① 父组件传递初始值，子组件将初始值保存起来，在自己的作用域下可以随意使用和修改。这种情况可以在组件的 data 种声明一个数据，引用父组件传递过来的 props。步骤：注册组件将父组件的数据传递进来给子组件 props...

单向数据流通过 props 传递数据是单向的，父组件数据变化会传递给子组件，而反过来不行。目的：尽可能将父子组件解稿，避免子组件无意中修改了父组件的状态。应用场景：① 父组件传递初始值，子组件将初始值保存起来，在自己的作用域下可以随意使用和修改。这种情况可以在组件的 data 种声明一个数据，引用父组件传递过来的 props。步骤：注册组件将父组件的数据传递进来给子组件 props...

产生原因提高代码复用性使用方法全局注册(用的少)Vue.component(tag, { template: '<div>我是全局注册的组件</div>'})优点：所有的 Vue 实例都能使用；缺点：权限太大，容错率降低。局部注册<div id="app"> <componentName></componentNam...

App.vue首先我们要明白的是，页面是在 App.vue 开始启动的<template> <div id="app"> <router-view/> </div></template>上面的代码是 App.vue 的初始状态，需要注意的是 <template> 下还必须有一个父元素 <di...