vue组件基础知识及组件间通讯

本文主要通过使用vue的一些特性生成想要的显示效果，本文的参考知识均来自vuejs官网。

demo涉及的知识点如下：

使用了父子组件变量通讯，可参考https://cn.vuejs.org/v2/api/#props，
使用父子组件之间事件通讯机制，可参考：https://cn.vuejs.org/v2/api/#vm-on https://cn.vuejs.org/v2/api/#vm-emit
使用了vue的组件compoents属性，注册需要使用的组件。
使用vue的内置组件compoent，可参考：https://cn.vuejs.org/v2/api/#component
使用了组件的is属性，动态决定需要显示的组件，可参考：https://cn.vuejs.org/v2/api/#is
使用了组件的extends扩展属性，可参考：https://cn.vuejs.org/v2/api/#extends

code如下：

<!--componetA-->
<template><compoent1 :left="var1" :height="var2" :width="var3" :class="Frame"> <!--组件1-->.....................<compoent2 :left="var1" :height="var2" :width="var3" :class="Frame"> <!--组件1--><compoent3 :style="Varstyle" :listData="Data" v-on:welcome = "welcomefunction('para')"> <!-- 或者语法糖@welcome --> </compoent3></compoent2></compoent1>
</template><script>
import compoent1 from "../compoent1 "
import compoent2 from "../compoent2 "
import compoent3 from "../compoent3 "
import compoent4 from "../compoent4"
import compoent5 from "../compoent5"
export default{name:'compoentA',compoents:{compoent4 },extends:compoent5,data: function(){return {var1:'aa',var2:'aa',var3:3,Data:[{template:compoent4,car:'hongqi'     }  ]},mounted:function(){}created:function(){}computed:{},methods:{welcomefunction：function(param){//dosomething  } }..................................}

<!--组件compoent1-->
<template><div id=class :left="var1" :height="var2">dddd</div>
</template>
export default{
name:'compoent1',
props:{var1:{type:String,default:''},var2:{},var3:{}}
},
data(){},
.............
}

<!--组件compoent3-->
<template><div><componet v-for="(data,index) in Data" :is="compoentTemplate ? compoentTemplate  :Data.template"></componet></div>
</template>
export default{
name:'compoent3',
props:{Data:{type:String,default:''},var2:{},var3:{}}
},
data(){},
methods:{keydown(e){if(e.keyCode === 13){this.emit('welcome',param1,e) //子组件使用$emit来触发事件，对应的父组件使用$on监听子组件事件}}
.............
}

对于父组件componetA和子组件componet3，子组件在监听到确认键盘事件时，通过$emit()把它传递给父组件，父组件通过$on()监听到了子组件来的消息，就执行dosomething. v-on 监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。

(相关知识有javascript的设计模式-观察者模式，dispatchEvent和addEventListener)

vue组件基础知识及组件间通讯相关推荐

使用Vue3学习Vue的基础知识
创建 Vue 应用 vue的安装有多种方式,本文只讨论基础知识,其他安装方式请自行查阅官网 https://v3.cn.vuejs.org/guide/installation.html 本文使用CD ...
Vue的基础知识之插值操作
在学习之前如果你没有ES6的相关知识补充,请先去看看博主的这篇文章关于VUE中ES6的基础知识 1.Vue的基础知识 Vue是一个渐进式框架渐进式意味着你可以将Vue作为你应用的一部分嵌入其中,带 ...
Vue组件基础知识总结
组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树. 那么什么是组件呢?组件可以扩展HTML元素,封装 ...
Vue学习——组件基础之父子组件之间的传值
一.父组件向子组件传值作用:因为在Vue的组件化开发中页面的各个功能模块对应各个组件,组件之间的传值变得尤为重要. 举例:父组件相当于导航栏,子组件相当于点击导航栏之后显示对应的内容界面:点击导航栏 ...
Vue.js基础知识
一.Vue.js是什么? 它是一套用于构建用户界面的渐进式框架.其设计为自底向上逐层应用.Vue只关心视图层. 二.声明式的渲染 1. Vue.js的核心是采用简洁的模板语法来声明式地将数据渲染到DO ...
后端学习前端 Vue 框架基础知识
文章目录一.Vue 基础语法学习 1.Vue 语法指令 2.Vue 实例属性 (1)el (2)data (3)methods (4)computed 3.事件修饰符 4.按键修饰符 5.Vue实例 ...
vue.js基础知识篇(5):过渡、Method和Vue实例方法
第8章:过渡 1.CSS过渡 2.JavaScript过渡 3.渐进过渡第9章:method Vue.js的事件一般通过v-on指令配置在HTML中,虽然也可以在js的代码中使用原生的addEven ...
vue的基础知识-vue基础入门
vue的使用分享 1. Vue简介 2.Vue常用指令 3. V-router路由系统 4. Vue生命周期 1. Vue简介工欲善其事,必先利其器 1.1 Vue是什么? Vue (读音 /vju ...
Vue 入门基础知识
01-Vue入门学习Vue最好的方式:查看官网文档 https://cn.vuejs.org/ 1.1-Vue介绍 Vue介绍描述 1.Vue是一个JavaScript框架框架:别人写好的js文 ...
Vue CLl 基础知识+安装
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global ...

vue组件基础知识及组件间通讯

vue组件基础知识及组件间通讯相关推荐

最新文章

热门文章