700字范文 > 一小时入门vue组件（建议收藏）

一小时入门vue组件（建议收藏）

时间：2023-04-08 15:27:25

相关推荐

一小时入门vue组件（建议收藏）

web前端|Vue.js

vue组件

web前端-Vue.js

输入法注入dll源码,vscode如何新建工作区,ubuntu 桌面手机,tomcat的日志分类,pythonapp爬虫流程,PHP购物车logo,湖北商品seo推广哪家好,16aspx 网站源码lzw

摄像头拍照c 源码,ubuntu如何添加语言,服务器打不开tomcat,php爬虫 js,php有下载链接打不开,李大学 seolzw

初识组件应用

实例化多个vue对象
reaoptimizer源码gif,vscode命令行安装插件卡住,ubuntu 邮件命令,可以装多少个tomcat,sqlite 导入 csv,留言板网页设计模板,远程访问服务器上禁止使用,discuz可见插件,微网站前端框架,用爬虫做科研,php转go,渝中区网站seo优化,网站html源码,网页qq客服模板下载,杰奇小说模板,好看的抽奖页面,hr人事管理系统开源,java 计算器小程序lzw
用new创建多个vue对象并命名，可以通过变量相互访问
例子：对象2修改对象1的name变量
这里是：{{name}}
这里是：{{name}}
// 第一个vue对象var one = new Vue({ el:"#vue-app-one", data:{ "name":"ccy1" }}) // 第二个vue对象var two = new Vue({ el:"#vue-app-two", data:{ "name":"ccy2" }, methods:{ // 修改vue-app-one的name为ccy333 changeName:function(){ one.name = ccy333 } }})

效果：点击后修改”ccy1“为”ccy333“

全局组件

定义与使用

例子：

定义组件：

// 自定义的全局组件my-component// template中只有一个根元素p标签，里面包含一个button按钮ponent(my-component,{ template:`

我的名字是：{{name}}

`, data(){ return { name:ccy } }, methods:{ changeName:function(){ this.name = 安之 } }})// vue对象1new Vue({ el:"#vue-app-one",})// vue对象2new Vue({ el:"#vue-app-two",})

使用组件：

效果：

data是一个函数

在vue对象中，data属性值是一个对象，比如这样的：

但是在全局组件中，同一份data可能被多个vue对象使用，每个对象不单独维护一份data时，如果某一个vue对象修改了data中的一个变量，其他vue对象获取data时就会被影响；

如果用上面的例子做案例，若组件中的data是对象（引用），其他地方均不改变，两个vue对象便共享同一个name变量；当我通过其中一个vue对象改变name数据时（即点击任一个btn按钮），另一个对象获得的name也发生了改变（其他按钮处的’ccy’也都被改成了’安之’）

在vscode中不允许组件中的data是对象，会报错：

[Vue warn]: The “data” option should be a function that returns a per-instance value in component definitions.

局部组件

例子：

局部组件定义：

// template仅一个根元素：ulvar msgComponent = { // 数据是自身提供的 (hobbies) template:`

{{hobby}}`, data(){ return { hobbies:[看剧,看动漫,吃好吃的] } }}

注册局部组件：

// 仅由注册过该局部组件的vue对象才能使用，此处为p#vue-app-one// 注意命名规范，components中对象的key将会被作为标签名，多个单词拼接的命名需使用横杆法// 可以写成msg-component，此处直接简化了命名为msg，new Vue({ el:"#vue-app-one", components:{ "msg": msgComponent }})

html文件中使用：

这里是vue-app-one

我的爱好：

效果：红框圈出的部分就是局部组件渲染出来的

父向子传值/传引用：prop

静态传值

创建子组件：

var titleComponent = { props:["title"], template:`

` // 所需要的数据title由父组件提供}

在父组件的components属性中注册子组件：

new Vue({ el:"#vue-app-one", components:{ "msg": msgComponent, "titleComponent":titleComponent },})

在父组件上使用子组件：

这里是vue-app-one

效果：红框标记处就是父向子传值并展示

动态传值：v-bind

定义子组件：

var titleComponent = { props:["title"], template:`

在父组件的components属性中注册子组件：

new Vue({ el:"#vue-app-one", components:{ "msg": msgComponent, "titleComponent":titleComponent }, data(){ return { title:"my hobbies are ", } }})

使用子组件，通过绑定父组件data中的变量title来实现动态传值：

这里是vue-app-one

效果：红框处就是动态绑定获取数据的展示

传递数组等复杂数据时，也可以使用v-bind来动态传值，如：

需要向子级传递hobbies数组，在vue实例对象（父）中创建数据hobbies：

new Vue({ el:"#vue-app-one", components:{ "msg": msgComponent, "titleComponent":titleComponent }, data:{ title:"my hobbies are ", hobbies:[看剧,看动漫,吃好吃的], //需要向子组件传递的数据 }})

定义子组件：

var msgComponent = { template:`

`, props:["hobby"], data(){ return { } }}

使用子组件：

这里是vue-app-one

效果：

跳回“一点想法”处

子向父：事件传值$emit

子组件不能通过prop向父组件传递数据，需要使用事件向父组件抛出一个值，告知父组件我需要实现一个功能，由父组件处理这个事件

例子：点击按钮，改变名称chinesename

（由于data变量名不支持chinese-name形式，花括号里不支持chineseName形式，所以这里我都用了小写，此处记录一下，日后学到了新知再来填坑）

先在父组件的data中定义chinesename的初始值：

new Vue({ el:"#vue-app-one", data:{ chinesename:"anzhi" // chinesename初始值 }})

创建子组件，并注册事件change-name（就像click事件一样，需要让系统能够辨认这是一个事件并监听，当事件被触发时，执行某项约定好的操作）：

ponent(log-post, { props: [chinesename], template: `

` // blog-post组件包含一个h3，显示chinesename，和一个按钮 // 点击这个按钮，触发change-name事件，将"ruosu"作为参数传递给指定的处理函数onChangeName })

在父组件中使用子组件，定义change-name的处理函数为onChangeName：

这里是vue-app-one

在父组件处定义事件处理函数onChangeName：

new Vue({ el:"#vue-app-one", data:{chinesename:"anzhi" }, methods:{ onChangeName:function(value){ // 将chinesename换成传递过来的数据 this.chinesename=value } }})

效果：