Tsunami黄嵩粟 - 博客园

2021年1月7日

摘要： <slot> 元素可以用一个特殊的特性 name 来进一步配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。 # 子组件 <div class="container"> <header> <slot name="header"></slot> </he 阅读全文

posted @ 2021-01-07 14:50 Tsunami黄嵩粟阅读(117) 评论(0) 推荐(0)

vue单个插槽

摘要：当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的 DOM 位置，并替换掉插槽标签本身。 # 子组件 <div> <h2>我是子组件的标题</h2> <slot> 只有在没有要分发的内容时才会显示。 </slot> </div> # 父组件 <div> <h1>我是父组阅读全文

posted @ 2021-01-07 14:46 Tsunami黄嵩粟阅读(93) 评论(0) 推荐(0)

vue Ref 动态组件 keeplive

摘要： ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例 # 普通dom元素上 <p ref="p">hello</p> # 子组件上 <child-comp ref= 阅读全文

posted @ 2021-01-07 11:35 Tsunami黄嵩粟阅读(434) 评论(0) 推荐(0)

事件总线

摘要：非父子组件或更多层级间组件间传值，在Vue中通过单独的事件中心来管理组件间的传值。 ² 建立统一的事件中心 const bus = new Vue() ² 传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据) ² 接收数据方，在生命周期函数中，通过bus.$on(方法名,[param 阅读全文

posted @ 2021-01-07 10:57 Tsunami黄嵩粟阅读(102) 评论(0) 推荐(0)

2021年1月6日

vue子组件向父组件传值

摘要： ² 子组件用$emit()定义自定义事件，$emit()第一个参数为自定义的事件名称第二个参数为需要传递的数据 ² 父组件用v-on(@)绑定子组件定义的自定义事件名，监听子组件的事件，实现通信第1步：在子组件中通过this.$emit()完成自定义事件定义在父组件中实现子组件中自定义的事件阅读全文

posted @ 2021-01-06 18:55 Tsunami黄嵩粟阅读(80) 评论(0) 推荐(0)

vue组件间传值父组件向子组件传值

摘要： ² 父组件以属性的形式绑定值到子组件身上 ² 子组件通过使用属性props接收(props是单向绑定的(只读属性)：当父组件的属性变化时，将传导给子组件，但是反过来不会) 第1步，父组件以动态属性的方式把自身中的data数据传值给子组件第2步：在子组件中通过配置选项props来动态获取自定义组件中阅读全文

posted @ 2021-01-06 18:28 Tsunami黄嵩粟阅读(153) 评论(0) 推荐(0)

vue局部注册

摘要：只能在当前注册它的vue实例中使用，通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件 var Child = { template: '<div>A custom component!</div>' } new Vue({ components: { // 阅读全文

posted @ 2021-01-06 18:25 Tsunami黄嵩粟阅读(86) 评论(0) 推荐(0)

vue组件定义全局组件

摘要：组件 (Component) 是 Vue.js 最强大的功能之一，它是html、css、js等的一个聚合体。组件化将一个具备完整功能的项目的一部分分割多处使用加快项目的进度可以进行项目的复用组件注册分为：全局注册和局部注册全局注册 Vue.component('组件名称', { })第1 阅读全文

posted @ 2021-01-06 18:20 Tsunami黄嵩粟阅读(663) 评论(0) 推荐(0)

2021年1月5日

vue axios

摘要：文档：https://www.kancloud.cn/yunye/axios/234845 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和node.js中。能拦截请求和响应，自动转换JSON数据。axios也是vue作者推荐使用的网络请求库。兼容问题使用语法 # GE 阅读全文

posted @ 2021-01-05 18:19 Tsunami黄嵩粟阅读(118) 评论(0) 推荐(0)

vue实例生命周期

摘要：每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码。 beforeCreate 在实例初始化之后，数据观测和事阅读全文

posted @ 2021-01-05 17:29 Tsunami黄嵩粟阅读(104) 评论(0) 推荐(0)