Vue——邂逅Vue
Vue——Vue的基础语法
Vue——Vue的组件化
Vue——slot_插槽的基本使用

文章目录

1：组件化的介绍和使用
2：组件步骤解析
3：全局组件和局部组件
4：父组件和子组件
5：注册组件的语法糖
6：组件模板抽离的方法
7：组件数据的存放
8：父子组件的通信
- 8.1 props基本用法——父传子
- - 8.1.1 props数据验证
  - 8.1.2 父组件访问子组件：$children
- 8.2 子传父
- - 8.2.1 子组件访问父组件：$parent

1：组件化的介绍和使用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script>     </head><body><div id="demo">       <cpn></cpn></div><script>const cpn=Vue.extend({template: '<div><h1>dada</h1></div>'});Vue.component('cpn',cpn)</script></body>
</html>

2：组件步骤解析

3：全局组件和局部组件

以下演示局部组件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head><body><div id="demo">       <cpns></cpns></div><script>const cpn=Vue.extend({template: '<div><a>dadadd</a></div>'});console.log(1);Vue.component('cpns',cpn);console.log(2);//局部组件const demo=new Vue({el: '#demo',components: {cpns: cpn}})</script>      </body>
</html>

4：父组件和子组件

代码演示


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="demo"><mycp></mycp></div><script>const cpp=Vue.extend({template: '<div><h1>ppp</h1></div>',})const cps=Vue.extend({template: '<div><h1>sss</h1><cpp></cpp></div>',components: {cpp: cpp}})const demo=new Vue({el: "#demo",components: {mycp: cps}})  </script></body>
</html>

5：注册组件的语法糖

代码示例如下

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="demo">        <cpns></cpns></div><script>const demo=new Vue({el: '#demo',components: {cpns: {template: '<div><a>dadadd</a></div>'}}})</script>     </body>
</html>

6：组件模板抽离的方法

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="demo"><mycp></mycp></div><template id="demo1"><div><h1>sss</h1></div></template><script>const cpp=Vue.extend({template: '#demo1',})const demo=new Vue({el: "#demo",components: {mycp: cpp}})</script></body>
</html>

7：组件数据的存放

如果 Vue 没有这条规则(data必须是函数)，点击一个按钮就可能会影响到其它所有实例：

组件存放数据演示

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="demo2"><mycp></mycp></div><template id="demo"><div><h2>{{message}}</h2><h1>dadad</h1></div></template><script>const a=Vue.extend({template: '#demo',data() {return {message: 11}}                                   })const demo=new Vue({el: '#demo2',components: {mycp: a}})</script></body>
</html>

8：父子组件的通信

8.1 props基本用法——父传子

代码示例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"><mycp v-bind:datas="datas"></mycp></div><template id="demo"><div>{{datas}}</div></template><script>const cps=Vue.extend({template: '#demo',props: ['datas'],})const app=new Vue({el: "#app",data: {datas: ['daa','aaa','aaa']},components: {'mycp': cps}})</script></body>
</html>

8.1.1 props数据验证

8.1.2 父组件访问子组件：$children

代码演示：


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"><mycp v-bind:datas="datas"></mycp><button v-on:click="btnclick()">点击</button></div><template id="demo"><div>{{datas}}</div></template><script>const cps=Vue.extend({template: '#demo',props: ['datas'],})const app=new Vue({el: "#app",data: {datas: ['daa','aaa','aaa']},components: {'mycp': cps},methods: {btnclick(){console.log(this.$children[0].name)//  console.log(this.$children.datas[0])}}})</script></body>
</html>

8.2 子传父

代码演示


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"><mycp v-on:itemclick="accpetnews"></mycp></div><template id="demo"><div><button type="button" v-for="item in species" v-on:click="btnclick(item)">{{item.name}}</button></div>            </template><script>const cps=Vue.extend({template: '#demo',data() {return {species: [{id: 'aa',name: '游戏'},{id: 'bb',name: '生活'},{id: 'cc',name: '学习'}]}},methods: {btnclick(item) {//console.log(item)//子组件发送事件this.$emit('itemclick')}}})const app=new Vue({el: "#app",data: {datas: ['daa','aaa','aaa']},components: {'mycp': cps},methods: {accpetnews(){console.log(1)}}})     </script></body>
</html>

8.2.1 子组件访问父组件：$parent

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"><mycp v-bind:datas="datas"></mycp></div><template id="demo"><div>{{datas}}<button v-on:click="btnclick()">点击</button></div></template><script>const cps=Vue.extend({template: '#demo',props: ['datas'],methods: {btnclick(){console.log(this.$parent)//    console.log(this.$children.datas[0])}}})const app=new Vue({el: "#app",data: {datas: ['daa','aaa','aaa']},components: {'mycp': cps}})</script></body>
</html>

Vue——Vue的组件化相关推荐

360奇舞团钟恒：选用Vue.js进行组件化开发，我们遇到了哪些坑？
责编:陈秋歌,关注前端开发领域,寻求报道或者投稿请发邮件chenqg#csdn.net. 欢迎加入"CSDN前端开发者"微信群,参与热点.难点技术交流.请加群主微信「Rachel_ ...
Vue入门之组件化开发
Vue入门之组件化开发 http://www.jianshu.com/p/6718ab1caa81 组件其实就是一个拥有样式.动画.js逻辑.HTML结构的综合块.前端组件化确实让大的前端团队更高效的 ...
Vue.js教程-组件化开发
Vue.js教程-组件化开发前言 Vue组件化什么是组件化 Vue单页面开发的解释组件化思想组件的使用原理实际开发中的使用-父子组件父子组件传递数据父传子-props用法子传父-th ...
【Vue】Vite 组件化开发
文章目录组件化开发一.组件化开发思想二.Vue 组件的构成 2.1 组件组成结构 2.2 组件 template 节点 2.2.1 在 template 中使用指令 2.2.2 在 templa ...
Vue.js-Day02-PM【组件化开发（全局注册组件、局部注册组件、案例）、组件的配置选项、轮播图实例（左右切换按钮、底部导航栏、定时器、鼠标移入-图片静止）】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.组件化开发 4.1.组件的注册全局注册局部注册(只能在当前整个Vue实例的范围内才可以使用) 使用组件 ...
[Vue.js] 深入 -- 组件化开发
组件化开发思想现实中的组件化思想体现标准分治重用组合组件注册全局组件注册语法 Vue.component(组件名称,{data:组件数据,template:组件模板内容 }) 组件用法 ...
Vue.js-资料-组件化思想 —上
一.Vue中的组件 Vue视图层的灵魂 - 组件化组件(Component)是 Vue.js 最强大的功能之一: 组件可以扩展 HTML 元素,封装可重用的代码: 在较高层面上,组件是自定义元素, ...
Vue.js的组件化开发
组件化开发什么是组件? web中的组件其实就是页面组成的一部分, 好比是电脑中的每一个元件(如硬盘.键盘.鼠标), 它是一个具有独立的逻辑和功能或界面, 同时又能根据规定的接口规则进行相互融化, 变 ...
Vue基础知识+组件化开发+模块化开发总结
三.内容: 一.MVVM View层视图层,我们前端开发时候的DOM层主要就是给用户展示各种信息 Model层数据层:可能是我们固定的思数据,更多的是来自我们的服务器,在网路上请求下来的数据 V ...
vue相关的组件化开发和模块化开发及工程化
vue作为当前最流行的前端框架,随着更新迭代,组件化和模块化思想就成为了主流. 大多数招聘信息提到模块化开发,我自己理解vue的模块化:javascript模块化思想是利用es6的 import/ex ...

Vue——Vue的组件化

文章目录

1：组件化的介绍和使用

2：组件步骤解析

3：全局组件和局部组件

4：父组件和子组件

5：注册组件的语法糖

6：组件模板抽离的方法

7：组件数据的存放

8：父子组件的通信

8.1 props基本用法——父传子

8.1.1 props数据验证

8.1.2 父组件访问子组件：$children

8.2 子传父

8.2.1 子组件访问父组件：$parent

Vue——Vue的组件化相关推荐

最新文章

热门文章