一、子父组件1、子组件获得父组件中的值：通过v-bind方式绑定在子组件中// 子组件中定义propsprops: [‘msg‘]// 父组件中：
<deleteBar :msg=‘this.xx‘ :name=‘this.yy‘></deleteBar>
//在以html元素方式插入子组件的位置，用:msg的方式绑定已经在子组件中定义的参数，=‘this.xx‘引用父组件中的值2、子组件中调用父组件中的方法1> 绑定在子组件定义的元素位置，在子组件中用emit方法触发，与传递值的方法相似// 子组件：
//...
朝颜陌 vue基础----组件通信（props,$emit,$attrs,$listeners）一、父传子，子传孙 1. props 1>在父组件中通过子组件自定义的标签属性来传递数据。 2>在子组件中通过props声明希望用到的数据 1 <body>2 <div id="app">3 <my-father :msg1="msg" a="10" :b="20" @click1="fn"></my-father>4 </div>5 <script src="./node_modules/vue/dist/vue.js"></script>6 <script>7 let vm =...
第一种：props，$emit用于在父子组件之间进行传值，通信第二种：vuex父子组件，兄弟组件等组件之间的通信都可以使用第三种：$root.$on , $root.$emit深层组件嵌套时候可以使用另外还有好几种通信方式，我只记录我使用过的这几种 原文：https://www.cnblogs.com/sixrookie/p/13091797.html
（1）全局注册<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"/><title>Vue</title></head><body><div id="app"><my-component></my-component></div><script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script><script type="text/javascript">//示例前注册 Vue.component(‘my-component‘, {//DOM结构必须被元素包含 template: ‘<div>组件内容</div>‘})new Vue({el: "#ap...
SvgIcon组件主要是整站所有的图标icon，提前成一个单独的组件。假如Nav.vue需要该组件，引用即可。由此可见，需要将SvgIcon.vue组件注册为全局组件，谁需要，谁引用。一、将SvgIcon.vue注册为全局组件、1、注册组件//SvgIcon是组件名 { }里边是组件内容
Vue.component(‘SvgIcon‘,{template:`<div>我是SvgIcon组件</div>`,data(){return {msg:‘hello‘}}
})
因此，可将组件内容抽离出来单独的文件---SvgIcon.vue2、抽离SvgIcon....
组件
名称小写==》 用-链接02===>
属性==> empty-text="暂无数据" 当表格中没有数据 就会显示 暂无数据<el-table-column v-for="item in tabColumn":key="item.prop":prop="item.prop":label="item.label":width="item.width":align="item.align"empty-text="暂无数据"></el-table-column>03==> :align="item.align" 是居中的方式 有 left center right 组件.vue<template><el-table :data="tableData" stripe style="width: ...
错误信息：提示信息含义：组件模板中只能包含一个根元素解决办法：在模板元素内部增加块级元素div将这些元素标签包裹起来，如图所示 原文：https://www.cnblogs.com/laoniaofly/p/8974218.html
compoent引入组件1.先写好子组件x.vue，需要从父组件传变量到子组件；在子组件里写：props：[‘xx‘]；为变量，用法{{xx}}即可；2.在全局样式里引用组件import X from ‘./components/x.vue‘;Vue.compoent(‘X‘,X);3.在你需要引用的vue页面里引用组件即可，如<x xx="sss"></x>就好原文：https://www.cnblogs.com/ssszjh/p/9563260.html
Vue获取组件的一些方法this.$refs.xxx给标签绑定ref属性，获取的是当前DOM对象给组件绑定ref属性，获取的是组件实例对象this.$parent获取当前组件的父组件,为一个对象this.$root获取当前组件的根组件,为一个对象this.$children获取当前组件的子组件,为一个数组vue-cli(vue脚手架)的使用1.安装npm install -g @vue/cli //必须先安装了node.js -g表示全局环境
vue -V // 可查看当前vue-cli的版本
2.创建项目Vue CLI >= 3 和旧版使用...
1.什么是组件组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。组件化和模块化的不同：2.组件化与模块化 模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一 组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用3.组件定义方式 全局定义 ①使用Vue.extend配合Vue.copmpone...
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。个人认为就是一个可以重复利用的结构层代码片段。全局组件注册方式：Vue.component(组件名,{方法})eg:<body>
<div id="app">
<my-component></my-component>
</div>
<div id="app1"><my-component><...
-组件的使用 <!-- 1、父组件中引入组件 import Home from "./components/Home"; 2、注册组件 components:{‘v-home‘:Home,}, 3、使用组件 <v-home></v-home> --> -路由及组件跳转<!--1、安装并保存npm install vue-router --save2、在main.js里引入并使用import VueRouter from ‘vue-router‘Vue.use(VueRouter)3、在main.js里路由配置 1.创建组件 引入组件 import Router from "./components/06...
Vue组件化开发（二）Vue之传递数据父组件把数据传递给子组件可以通过props属性，来将父组件的数据传递给子组件，传递数据的三个步骤：step 1:在父组件中调用子组件，在组名处，使用给标签属性赋值的方式往下传递数据<template><div id="father"><son :mynum="father_num" title="我是father组件的num"></son></div>
</template># 上面表示父组件father在调用子组件son子组件的时候，一共传递了两个参数
如果传递的数据是一个变量，...
阅读目录一、为什么组件很重要二、Vue里面的组件基础知识1、组件的概念2、组件原理3、组件使用三、封装自己的Component1、使用Component封装bootstrapTable2、封装select3、查看其他Vue框架源码四、总结 正文前言：转眼距离上篇 JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查） 已有好几个月了，今天打算将它捡起来，发现好久不用，Vue相关技术点都生疏不少。经过这几个月的时间，Vue的发展也是异常迅猛，不过这...
在vue中通过切换不同的组件来达到页面的切换在组件分为三个部分第一个部分：<template></template>这一部分是用来写关于HTML的代码的，而且只能有一个根元素错误的写法：<template><div></div><div></div>
</template>这里就有两个跟元素div，是错误的写法。正确的写法：<template> <div class="father"> <div class="son"></div> <div class="son"></div> </div></template> 第二部分：<script></script>结构...
