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 ...
随机推荐
- LUOGU P3919 【模板】可持久化数组(主席树)
传送门 解题思路 给每一时刻建一棵线段树维护当前时刻的值,然后修改的时候直接修改,查询的时候直接查,记住查询完后一定要复制. 代码 #include<iostream> #include& ...
- day 72 Django基础七之Ajax
Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 六 同源策略与 ...
- Java中方法的定义与使用，以及对数组的初步了解。
方法 方法的含义 定义: 方法就是用来完成解决某件事情或实现某个功能的办法. 方法实现的过程中,会包含很多条语句用于完成某些有意义的功能——通常是处理文本,控制输入或计算数值. 我们可以通过在程序代码 ...
- 2018-8-10-win10-uwp-打开文件管理器选择文件
title author date CreateTime categories win10 uwp 打开文件管理器选择文件 lindexi 2018-08-10 19:16:50 +0800 2018 ...
- vue:使用element-ui制作动态表格
参考; https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/table/dynamic-table/compon ...
- C++ 系列：extern
extern 作用1:声明外部变量现代编译器一般采用按文件编译的方式,因此在编译时,各个文件中定义的全局变量是互相透明的,也就是说,在编译时,全局变量的可见域限制在文件内部. 例1:创建一个工程,里面 ...
- drupal-note2 drush运行make文件
进入durpal项目的根目录中执行 drush make build-openpublic.make /path/to/webroot 参考: Managing Drush make files fo ...
- postgresql数据库学习-win平台下SQLshell基础操作及语法
由于在学习https://www.bilibili.com/video/av24590479小马视频时, up主采用的linux虚拟机进行教学, 而本人采用window7进行操作,故在基础操作和语法上 ...
- leetcode-第五场双周赛-1134-阿姆斯特朗数
第一次提交: class Solution: def isArmstrong(self, N: int) -> bool: n = N l = len(str(N)) res = 0 while ...
- DRF 序列化组件单增
目录 自定义序列化(矬) Serializer类(方式繁琐) 底层序列化类 UserSerializer 视图序列化步骤 底层反序列化类 UserCreatSerializer 视图反序列化步骤 Mo ...