vue父子组件的生命周期顺序
vue父子组件的生命周期顺序加载渲染过程1父beforeCreate -> 父created-> 父beforeMount-> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted 父组件会先执行到beforeMount，接着会执行子组件钩子到挂载结束，再挂载父组件。 子组件更新过程1父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated 父组件更新过程1父beforeUpdate -> 父updated 销毁过程1父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed 来源：本文导入自 xugaoyi/vuepress-theme-vdoing 的 docs/《Vue》笔记/02.组件/90.vue父子组件的生命周期顺序.md。原作者：xugaoyi。许可证：MIT。
非父子组件传值
非父子组件间传值当组件的嵌套多时，非父子组件间传值就显得复杂，除了使用vuex实现之外，还可以通过Bus（或者叫 总线/发布订阅模式/观察者模式）的方式实现非父子组件间传值。 123456789101112131415161718192021222324252627282930313233343536373839404142<div id="root"> <child1 content="组件1：点我传出值"></child1> <child2 content="组件2"></child2></div><script type="text/javascript"> Vue.prototype.bus = new Vue() // 每个Vue原型上都会有bus属性,而且指向同一个Vue实例 Vue.component('child1', ...
自定义事件
自定义事件API 在组件标签v-on绑定的事件是自定义事件123456789101112131415161718<div id="root"> <child @click="handleClick"></child> <!--这里click是自定义事件--></div><script type="text/javascript"> Vue.component('child', { template: '<button>Child</button>', }) var vm = new Vue({ el: '#root' methods: { handleClick() { alert('...
使用组件的细节点
使用组件的细节点解析 DOM 模板时的注意事项1234567891011121314151617<div id="root"> <table> <tbody> <row></row> <row></row> <row></row> </tbody> </table></div><script type="text/javascript"> Vue.component('row', { template: '<tr><td>this is a row</td></tr>' }) var vm = new Vue({ ...
兄弟组件传值
兄弟组件传值子组件1中把值传到父组件,父组件获取值传入子组件2 父组件： 123456789101112131415<子组件1 @方法名x="方法名y"></子组件1><子组件2 :值名称x="值x"></子组件2 >data() { return { 值x: '' }},methods: { 方法名y(值) { this.值x = 值 }} 子组件1： 1this.$emit('方法名x', 值) // 传出值 子组件2： 123456props: { 值名称x: { // 接收父组件传入值 type: String, default: '' }} 来源：本文导入自 xugaoyi/vuepress-theme-vdoing 的 docs/《Vue》笔...
子组件派发事件和值给父组件
子组件派发事件和值给父组件API 子组件通过$emit派发事件和值给父组件（值可以有多个） 1this.$emit('fnX', value) 父组件通过v-on绑定子组件派发的事件，并触发一个新的事件，新的事件内可以接收传来的值 12345678<ComponentName @fnX="fnY"></ComponentName>methods: { fnY(value) { console.log(value) }} 父子组件间传递数据 demo See the Pen mdJVqgg by xugaoyi (@xugaoyi) on CodePen. 1<script async src="https://static.codepen.io/assets/embed/ei.js"></script> 来源：本文导入自 xugaoyi/vuepress-theme-vdoing ...
