Vue组件相关

一  组建的注册

  1.全局注册

 1  <div id="app">
 2       <wdb></wdb>
 3  </div>
 4  <hr>
 5  <div id="app1">
 6      <wdb></wdb>
 7      <wdb></wdb>
 8  </div>
 9  <script>
10     Vue.component(‘wdb‘,{
11         template:`<div><h1>这是wdb的地盘</h1></div>>`,
12      });
13     const app=new Vue({
14       el:‘#app‘,
15      });
16     const app2=new Vue({
17             el:‘#app1‘,
18      })
19  </script>

  

  2.局部注册      实例化的vue对象中注册

 1 <div id="app">
 2     <my_component></my_component>
 3 </div>
 4 <script>
 5     var Child={
 6         template:`<div><h1>{{name}}</h1></div>`,
 7         data:function () {          ******data必须是函数(方法)
 8             return {
 9                 name:‘wdb‘,
10             }
11         }
12     };
13     const app=new Vue({
14         el:‘#app‘,
15         components:{
16              ‘my_component‘:Child,
17         }
18     })
19 </script>

  3.子组件的注册

 1 <div id="app">
 2     <father></father>
 3 </div>
 4 <script>
 5     let child = {
 6         template: `<div><h2>这是子组件</h2></div>`,
 7     };
 8     let father = {
 9         template: `<div>
10                     <h1>这是父组件</h1>
11                     <child></child>
12                     </div>`,
13         components: {
14             child: child
15         }
16     };
17
18     const app = new Vue({
19         el: "#app",
20         components: {
21             father: father
22         }
23     })
24 </script>

二 组件之间的通信

  1.父子通信

 1 <div id="app">
 2     <father></father>
 3 </div>
 4 <script>
 5     let child={
 6         template:`<div>
 7                         <h2>这是子组件</h2>
 8                         <p>父亲给了我{{money}}美元</p>
 9                     </div>`,
10         props:[‘money‘]
11     };
12     let father={
13         template:`<div>
14                     <h1>这是父组件</h1>
15                     <child :money="num"></child>
16                 </div>
17                 `,
18         data:function () {
19             return {
20                 num:100,
21                 }
22             },
23             components:{
24                 child:child,
25             }
26         };
27     const app=new Vue({
28         el:‘#app‘,
29         components: {father:father,}
30         })
31 </script>

    

  2.子父通信

 1 <div id="app">
 2     <father></father>
 3 </div>
 4 <script>
 5     let child={
 6         template:`<div>
 7                     <h2>这是子组件</h2>
 8                     <button @click="my_click">点我发送信息</button>
 9                 </div>`,
10         methods:{
11             my_click:function () {
12                 this.$emit(‘son_say‘,‘爸,你要当爷爷了‘);
13             }
14         }
15     };
16     let father={
17          template: `<div>
18                 <h1>这是父组件</h1>
19                 <!--// 接收这个事件-->
20                 <child @son_say="my_son_say"></child>
21                 <p>老婆~~你儿子说~~{{msg}}</p>
22                 </div>`,
23          components: {
24             child: child
25         },
26         data(){
27              return{
28                  msg:‘‘
29              }
30         },
31         methods: {
32              my_son_say:function (data) {
33                  this.msg=data;
34              }
35         }
36     };
37     const app=new Vue({
38         el:‘#app‘,
39         components:{
40             father:father,
41         }
42     })
43 </script>

    3.非父子通信

 1 <div id="app">
 2     <wdb class="wdb"></wdb>
 3     <zhwl class="zh"></zhwl>
 4 </div>
 5 <script>
 6     let middle_tool=new Vue();
 7     let wdb={
 8         template:`<div>
 9                     <h1>这是王同学</h1>
10                     <button @click="w_click">点我给张同学发送信息</button>
11                     </div>`,
12         methods:{
13             w_click:function () {
14                 middle_tool.$emit(‘houhou‘,‘花大姐记得买票‘)
15             }
16         }
17     };
18     let zhwl={
19         template: `<div>
20                         <h1>这是张同学</h1>
21                         <P>王同学对我说{{say}}</P>
22                     </div>`,
23         data(){
24             return{
25                 say:‘‘,
26             }
27         },
28         mounted(){
29             let that=this;
30             middle_tool.$on(‘houhou‘,function (data) {
31                 that.say=data;
32             })
33         }
34     };
35     const app=new Vue({
36         el:‘#app‘,
37         components:{
38             zhwl:zhwl,
39             wdb:wdb,
40         }
41     })
42 </script>

三 混合     重复功能和数据的储存器

 1 <div id="app">
 2     <com_1></com_1>
 3     <com_2></com_2>
 4 </div>
 5 <script>
 6     let base = {
 7         data(){
 8             return{
 9                 is_show: false
10             }
11         },
12         methods: {
13             show: function () {
14                 this.is_show = true
15             },
16             hide: function () {
17                 this.is_show = false
18             }
19         }
20     };
21     let com_1 = {
22         template: `<div>
23                     <h1 v-show="is_show">这是第一个组件</h1>
24                     <button @click="show">点我显示</button>
25                     <button @click="hide">点我隐藏</button>
26                     </div>`,
27         data(){
28             return{
29                 is_show: true
30             }
31         },
32         mixins: [base]
33     };
34     let com_2 = {
35         template: `<div>
36                         <h1 v-show="is_show">这是第二个组件</h1>
37                         <button @mouseenter="show" @mouseleave="hide">鼠标移入显示移出隐藏</button>
38                     </div>`,
39       minxins: [base]
40     };
41
42     const app = new Vue({
43         el: "#app",
44         components: {
45             com_1: com_1,
46             com_2: com_2
47         }
48     })
49 </script>

四 插槽  插槽是一套内容分发的API,在组件中,<slot>作为内容承载分发的出口

 1 <div id="app">
 2     <com>
 3         <div slot="title">python</div>
 4         <div slot="article">很贵 很难学  常人勿扰</div>
 5     </com>
 6     <com>
 7         <div slot="title">linux</div>
 8         <div slot="article">每天对着黑屏发呆吧</div>
 9     </com>
10 </div>
11 <script>
12     let com = {
13         template: `<div>
14                     <h1>路飞学城</h1>
15                     <slot name="title"></slot>
16                     <slot name="article"></slot>
17                     </div>`,
18     };
19     const app = new Vue({
20         el: "#app",
21         components: {
22             com: com
23         }
24     })
25 </script>

原文地址:https://www.cnblogs.com/wdbgqq/p/9842647.html

时间: 2024-11-02 14:14:18

Vue组件相关的相关文章

vue组件相关内容

说明 组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码,组件系统让我们可以用独立可复用的小组件来构建大型应用. 定义方法 这是官网给出的一种定义组件的方法 一下是我目前使用的方法,以下内容都是按照此方法定义组件的.(因为这样可以使模板和组件分开) 定义组件前首先要定义一个模板,这是定义模板的一种方式 这是定义模板的另一种方式 接下来定义组件 这里有几个注意事项: 1.定义模板时,模板里只能有一个顶层标签. 2.定义组件时,不能使用H5标

关于vue组件的一个小结

用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维护成本更加的适合,而且最近看到Apache对react的相关许可限制:这里不讨论react和vue的对比哪个好,技术框架没有最好的,只有适合项目才是最好的. 进入主题....... 组件,是vue的核心之一. 我们可以把页面各个子模块看成一个组件,可以独立拆分出来.这样不仅维护变得简单了,而且代码复

Vue组件开发分享

在开始本文之前,你可能需要先了解以下相关内容: Vue.js  一款高性能轻量化的MVVM框架 Webpack  前端模块化代码构建工具 Vue组件介绍 基于vue.js高效的双向数据绑定特性,让我们在开发高可用组件时可以更加专注于数据逻辑开发: 忘记DOM操作,忘记事件绑定,让开发的专注力集中于数据上: 1.定义需要使用的数据及类型 2.在合适的时机更新数据 3.在模板上绑定数据与视图的映射关系 4.开放对外调用接口 代码 https://github.com/xiaoyunchen/vue-

JS组件系列——又一款MVVM组件:Vue(二:构建自己的Vue组件)

阅读目录 一.为什么组件很重要 二.Vue里面的组件基础知识 1.组件的概念 2.组件原理 3.组件使用 三.封装自己的Component 1.使用Component封装bootstrapTable 2.封装select 3.查看其他Vue框架源码 四.总结 正文 前言:转眼距离上篇 JS组件系列--又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue的发展也是异常迅猛,不过这好像和博

【Vue】详解Vue组件系统

Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用 通过Vue.component()去注册一个组件,你就可以全局地使用它了,具体体现在每个被new的 Vue 实例/注册组件, 的template选项属性或者对应的DOM模板中,去直接使用 注册组件 全局注册 例如,放在通过new创建的Vue实例当中: Vue.component('my-component', { template:

Vue的相关知识点

Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vue1.0悄悄的问世了,它的优雅,轻便也吸引了一部分用户,开始收到关注,16年中旬,VUE2.0问世,这个时候vue不管从性能上,还是从成本上都隐隐超过了react,火的一塌糊涂,这个时候,angular开发团队也开发了angular2.0版本,并且更名为angular,吸收了react.vue的优点,加上a

写一个vue组件

写一个vue组件 我下面写的是以.vue结尾的单文件组件的写法,是基于webpack构建的项目.如果还不知道怎么用webpack构建一个vue的工程的,可以移步到vue-cli. 一个完整的vue组件会包括一下三个部分: template:模板 js: 逻辑 css : 样式 每个组件都有属于自己的模板,js和样式.如果将一个页面比喻成一间房子的话,组件就是房子里的客厅.卧室.厨房.厕所.如果把厨房单独拿出来的话,组件又可以是刀.油烟机...等等.就是说页面是由组件构成的,而组件也可以是组件构成

vue组件篇(2)---封装组件并发布到npm

瞎说说 vue小白,要进行应用开发:你们都用什么UI框架,求指教,不想踩坑(想太多,不踩坑???不存在的!!!too young too simple-) 同学1:pc端我用element UI,感觉组件的API方法.属性比较完善...?? 同学2:哈?我个人感觉他的样式有些生硬,不够炫酷美观??,用iView吧,组件丰富,动画效果cool~~~?? 同学3:真的吗?阔是有人说,iView组件虽然完美的把其他UI组件有的缺点完美避过,但是某某组件不够人性化....?? 同学4:用vue-beau

vue组件通信的几种方式

最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建props,然后创建一个名为message的属性 child.png 3.在App.vue中注册Child组件,并在template中加入child标签,标签中添加message属性并赋值 App2.png 4.保存修改的文件,查看浏览器 browser.png 5.我们依然可以对m