vue.js_08_vue-组件的定义
1.vue组件常用定义方式
<body>
<div id="app">
<!--1.3使用组件-->
<mycom1></mycom1>
<mycom2></mycom2>
<mycom3></mycom3>
</div>
<template id="mycom3">
//只能有一个 根元素
<div>
<h3>这是使用Vue 创建的模板组件</h3>
</div>
</template>
<script>
Vue.component('mycom1', {
//只能有一个 根元素
template: '<div><h3>这是使用Vue 创建的全局组件</h3></div>'
})
var vm = new Vue({
el: '#app',
data: {},
methods: {},
components: {
mycom2: {
//只能有一个 根元素
template: '<div><h3>这是使用Vue 创建的私有组件</h3></div>'
},
mycom3: {
template: '#mycom3'
}
}
})
</script>
</body>
2.组件中的data和methods
<div id="app">
<count></count>
<hr />
<count></count>
<hr />
<count></count>
</div>
<template id="tpl1">
<div>
<input type="button" value="+1" @click="incrment" />
<h3>{{count}}</h3>
</div>
</template> <script>
Vue.component('count', {
template: '#tpl1',
data: function() {
return {
count: 0
}
},
methods: {
incrment() {
this.count++
}
},
});
var vm = new Vue({
el: '#app',
data: {},
methods: {},
});
</script>
</body>
3.vue组件之间的切换
<body>
<div id="app">
<a href="" @click.prevent="comName='login'">登陆</a>
<a href="" @click.prevent="comName='register'">注册</a>
<!-- component是一个占位符 :is 属性，可以用来指定要展示的组件的名称 -->
<component :is="comName"></component>
</div>
<script>
Vue.component('login',{
template:'<h3>登陆组件<h3>'
});
Vue.component('register',{
template:'<h3>注册组件<h3>'
}); var vm = new Vue({
el: '#app',
data: {
comName:'login',
},
methods:{}
})
</script>
</body>
4.vue父子组件之间对象的传递
1>通过 属性绑定(v-bind:)的形式将对象传递给子组件
<com1 v-bind:parentmsg="msg"></com1>
将父组件中data中的msg属性传递给子组件
子组件必须用 props: ['parentmsg'],来接收
<body>
<div id="app">
<!-- 父组件 通过 属性绑定(v-bind:)的形式，把需要传递给子组件，以属性绑定的形式，传递到子组件内部，供子组件使用 -->
<com1 v-bind:parentmsg="msg"></com1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '123,这是父组件中的数据'
},
methods: {}, components: {
com1: {
data() {
//组件中的data数据都是，组件私有的，比如：子组件动过ajax，请求回来的数据，都可以放到data上。是可读可写的
return {
title: '123',
content: 'qqq'
}
},
//默认子组件是无法访问父组件中的data和methods
template: '<h1>这是子组件----{{parentmsg}}</h1>',
// 把父组件传递过来的 parentmsg属性接受
//props这个数据是只读的
props: ['parentmsg'],
}
}
})
</script>
</body>
5.vue父子组件之间的方法的传递
1>父组件向子组件传递方法 用的是事件绑定 v-on:
<com1 @func="show"></com1>
//当点击子组件的按钮的时候，如何拿到 父组件传递过来的额func方法
//调用父组件 @func绑定的方法 并传递参数
this.$emit('func', this.son)
<body>
<div id="app">
<!-- 父组件向子组件传递方法 用的是事件绑定 v-on: -->
<com1 @func="show"></com1>
</div> <template id="tmpl">
<div>
<h1>这是子组件</h1>
<input type="button" value="这是子组件中的按钮-点击它触发父组件传递过来的fun方法" @click="myclick">
</div>
</template>
<script>
var vm = new Vue({
el: '#app',
data: {
datason:null
},
methods: {
show(data) {
console.log('调用了父组件身上的show方法--' + data),
this.datason=data
}, },
components: {
com1: {
template: '#tmpl',
data() {
return {
son: { name: '大头儿子', age: 5 }
}
},
methods: {
myclick() {
//当点击子组件的按钮的时候，如何拿到 父组件传递过来的额func方法
//调用父组件 @func绑定的方法 并传递参数
this.$emit('func', this.son)
}
}
}, }
})
</script>
</body>
6.veu中DOM元素的获取
<h3 id="h3" ref="myh3">哈哈哈，今天天气太好了！！！</h3>
设置要获取的dom元素的ref
console.log(this.$refs.myh3.innerHTML)
<body>
<div id="app">
<h3 id="h3" ref="myh3">哈哈哈，今天天气太好了！！！</h3>
<input type="button" value="获取元素" @click="getElement" />
<com1 id="com1" ref="com1"></com1>
</div>
<script>
Vue.component('com1',{
template:'<h3>我是com1组件</h3>',
data(){
return {
msg:'msg'
}
}
})
var vm = new Vue({
el: '#app',
data: {},
methods:{
getElement(){
//$refs获取DOM元素
console.log(this.$refs.myh3.innerHTML)
console.log(this.$refs.com1.msg)
}
}
})
</script>
</body>
vue.js_08_vue-组件的定义的更多相关文章
- java+springBoot+Thymeleaf+vue分页组件的定义
导读 本篇着重介绍java开发环境下,如何写一个vue分页组件,使用到的技术点有java.springBoot.Thymeleaf等: 分页效果图 名称为vuepagerbasic的分页组件,只包含上 ...
- vue学习—组件的定义注册
组件的定义注册 效果: 方法一: <div id="box"> <v-header></v-header> <hr /> <b ...
- Vue全局组件注册
通过Vue.component(‘组件名’, {配置对象})注册全局组件 在main.js中注册全局组件 test import Vue from 'vue' import App from './A ...
- Vue组件的定义、注册和调用
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>组 ...
- Vue.js 2.x：组件的定义和注册（详细的图文教程）
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 什么是组件 组件: 组件的出现,就是为了拆分Vue实例的代码量的, ...
- vue里在自定义的组件上定义的事件
事件分为原生事件和自定义事件. vue里在自定义的组件上定义的事件,都被认为是自定义事件,必须用$emit()来触发. 这也是子组件向父传值的原理. 如果想作为原生事件,需要在原生事件后面加上.nat ...
- vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件
vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...
- 038——VUE中组件之WEB开发中组件使用场景与定义组件的方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 数组封装和组件data定义为函数一些猜测
数组封装 var vm={ list:[0,1] } var push=vm.list.push;//把数组原来的方法存起来 vm.list.push=function(arg){//重新定义数组的 ...
- vue组件定义方式，vue父子组件间的传值
vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...
随机推荐
- sublime 3打开中文乱码问题
首先到官网 https://packagecontrol.io/installation#Simple 下载一个控制台支持的扩展包Package Control.sublime-package 在su ...
- csps模拟92数列，数对，最小距离题解
题面:https://www.cnblogs.com/Juve/articles/11767225.html 数列: 简化题意:已知a,b,c,求满足$a*x+b*y=c$的$x+y$最小值 然后ex ...
- 几个dp的陈年老题
真 陈年老题 都是基础的dp优化 主要是展现我基础薄弱,菜得抠脚 1．四边形不等式 四边形不等式:w[i][j]+w[i+1][j+1]<=w[i+1][j]+w[i][j+1] 对于f[i][ ...
- 用VC生成 IDispatch 包装类
1.创建包装类:View->ClassWizard->Add Class->Add Class From ActiveX Control Wizard 2 .选中Registry 3 ...
- Java之RabbitMQ(一)与SpringBoot整合
应用场景:异步处理.应用解耦.流量削峰 参照:https://blog.csdn.net/weixin_38364973/article/details/82834348 开端 RabbitAutoC ...
- 面试系列20 生产环境中的redis是怎么部署的
redis cluster,10台机器,5台机器部署了redis主实例,另外5台机器部署了redis的从实例,每个主实例挂了一个从实例,5个节点对外提供读写服务,每个节点的读写高峰qps可能可以达到每 ...
- JS规则 编程练习 考考大家的数学，计算以下计算公式的结果。然后在浏览器中运行一下，看看结果是否跟你的结果一致。
编程练习 考考大家的数学,计算以下计算公式的结果.然后在浏览器中运行一下,看看结果是否跟你的结果一致. 任务 第一步: 在 ? 处填写你的答案. 第二步: 填写完成后,运行一下,看看是不是跟你填写的 ...
- 记录：使用springboot的cors和vue的axios进行跨域
一.编写一个配置类,并且注册CorsFilter: 注意允许跨域的域名不要写错 @Configuration public class ZysuyuanCorsConfiguration { @Bea ...
- Python全栈开发：XML与parse对比
#!/usr/bin/env python # -*- coding;utf-8 -*- """ ET.XML和ET.parse的对比 1.返回对象差异: ET.XML: ...
- openSUSE中启用apache mod_rewrite
1. 编辑 "/etc/sysconfig/apache2"文件 查找 APACHE_MODULES,你应该会找到一行像 APACHE_MODULES="actions ...