Vue(2)- v-model、局部组件和全局组件、父子组件传值、平行组件传值
一、表单输入绑定(v-model 指令)
可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。
详细用法参见官方文档:https://cn.vuejs.org/v2/guide/forms.html
二、局部组件和全局组件
1、了解根组件template模板的优先级大于el,如下方式验证:
<div id="app">
{{ msg }}
</div>
<script>
// 如果仅仅是实例化vue对象中 既有el 又有template,
// 如果template中定义了模板的内容 那么template模板的优先级大于el
new Vue({
el: '#app',
data() {
return {
msg:'alex'
}
},
template: `
<div class="app"> // 通过控制台可看到显示了template中定义的div
<h2>{{ msg }}</h2>
</div>
`
})
</script>
2、局部组件的使用(声子,挂子,用子)
<div id="app">
<App></App>
</div>
<script>
// 声明一个组件 相当于自定义一个标签 因此名字首字母要大写 跟已有标签区分
// 局部组件 除了没有el属性 其他属性都与根组件(Vue实例化对象)一样
// 另外 组件中的data一定是一个函数 且必须有返回值
// 1、声明子组件
let App = {
data(){
return {
text:"我是局部组件App"
}
},
// 当前组件template中的标签与该组件的属性有关,跟其他组件无关
// 子组件的template一定要写 根组件(有el属性)的template可以不写 用el
// 组件的template中一定要用一个标签包含,也可以给他挂载子组件,并使用
template:`
<div>
<h2>{{ text }}</h2>
</div>
`
};
new Vue({
el: '#app',
data() {
return {
msg:'alex'
}
},
// 3、template中使用子组件 也可以不定义template属性 直接在el中使用
// 以标签的形式 如<App />或者<App></App>
template: `
<div class="app">
<App />
</div>
`,
// 属性components用来挂载子组件
components:{
// 2、挂载子组件App(可以挂载多个子组件 用逗号隔开依次书写即可)
App // 相当于App:App 如果键值一样,可以只写一个
}
})
</script>
总结:
1)一个子组件挂载到哪个组件,这个组件就是我的父组件;
2)以后模块化开发时,一个组件就是一个文件(一个组件包含了html,css,js),想使用这个组件时导入即可使用
3、全局组件的使用
<div id="app">
<!-- 使用局部组件App和Vheader -->
<App></App>
<Vheader></Vheader>
</div>
<script>
// 使用component方法 声明一个全局组件 全局组件不需要挂载 任一组件可使用
// 第一参数是组件的名字 第二个参数是options
Vue.component('VBtn',{
data(){
return { }
},
template:`
<button>按钮</button>
`
}); // 声明一个局部组件Vheader
let Vheader = {
data(){
return {
text:"我是局部组件Vheader"
}
},
// 使用全局组件VBtn
template:`
<div class="vheader">
<h2>{{ text }}</h2>
<VBtn></VBtn>
</div>
`
}; // 声明一个局部组件
let App = {
data(){
return {
text:"我是局部组件App"
}
},
// 使用全局组件VBtn
template:`
<div class="app">
<h2>{{ text }}</h2>
<VBtn></VBtn>
</div>
`
}; new Vue({
el: '#app',
data() {
return {
}
},
components:{
App, // 挂载局部组件App
Vheader // 挂载局部组件Vheader
}
})
</script>
补充:使用vue内置组件slot分发内容从而自定义按钮的值,代码修改如下:
Vue.component('VBtn',{
data(){
return { }
},
template:`
<button><slot></slot></button>
`
});
// 声明一个局部组件Vheader
let Vheader = {
data(){
return {
text:"我是局部组件Vheader"
}
},
// 使用全局组件VBtn
template:`
<div class="vheader">
<h2>{{ text }}</h2>
<VBtn>登录</VBtn>
</div>
`
};
三、父子组件之间传值
1、父组件往子组件传值
<div id="app">
<App></App> <!-- 使用局部组件App -->
</div>
<script>
// 声明一个局部组件Vheader
let Vheader = {
data(){
return { }
},
// 挂载父组件的属性,该组件中就可以使用,从父组件接收到的值也可再传给其子组件
props:['msg','post'],
template:`
<div class="vheader">
<h2>子组件Vheader start</h2>
<p>{{ msg }}</p>
<p>{{ post.title }}</p>
<h2>子组件Vheader end</h2>
</div>
`
}; // 声明一个局部组件App
let App = {
data(){
return {
text:"我是父组件App的数据",
app_post:{
id: 1,
title: 'hello world'
}
}
},
//
template:`
<div class="app">
<Vheader :msg='text' :post='app_post'></Vheader>
</div>
`,
components:{
Vheader // 挂载局部组件Vheader
}
}; new Vue({
el: '#app',
data() {
return {
}
},
components:{
App // 挂载局部组件App
}
})
</script>
总结:
1)在子组件中使用props声明,就可以在该组件中使用;
2)从父组件中接收到的值也可以传递给他的子组件;
3)父组件中绑定自定义的属性;
2、子组件往父组件传值
<div id="app">
<App></App> <!-- 使用局部组件App -->
</div>
<script>
// 声明一个全局组件VBtn
Vue.component('VBtn',{
data(){
return {}
},
props:['id'], // 父组件Vheader传递过来的值
template:`
<button @click="clickHandler">{{ id }}</button>
`,
methods:{
clickHandler(){
console.log(this); // 每个组件中的this指的是当前组件对象
// this.$emit('父组件中声明的自定义的事件', ' 传值')
this.id++;
this.$emit('click_Handler', this.id);
}
}
});
// 声明一个局部组件Vheader
let Vheader = {
data(){
return {}
},
props:['post'], // 父组件App传递过来的数据
template:`
<div class="vheader">
<VBtn :id='post.id' @click_Handler="fuClickHandler"></VBtn>
</div>
`,
methods:{
fuClickHandler(val){
this.$emit('fatherHandler', val) // 往父组件App传值
}
}
};
// 声明一个局部组件App
let App = {
data(){
return {
app_post:{
id: 1,
title: 'hello world'
}
}
},
template:`
<div class="app">
{{ app_post.id }}
<Vheader :post='app_post' @fatherHandler="father_handler"></Vheader>
</div>
`,
methods:{
father_handler(val){
this.app_post.id = val
}
},
components:{
Vheader // 挂载局部组件Vheader
}
};
new Vue({
el: '#app',
data() {
return {}
},
components:{
App // 挂载局部组件App
}
})
</script>
总结:
1)子组件中,通过this.$emit('父组件中自定义的事件名', '值'),来触发父组件中自定义的事件;
2)父组件中自定义事件(当前事件中接收子组件的),并为对应的子组件绑定(v-on)自定义的事件;
五、平行组件之间传值
<div id="app">
<App></App> <!-- 使用局部组件App -->
</div>
<script>
// TestA ==》 TestB 传值
// 平行组件传值前提:这两个方法必须绑定在同一个实例化对象(bus)上
let bus = new Vue(); // 声明一个Vue对象,只是用来平行组件间传值
// TestB要声明事件 bus.$on('事件的名字', function(val){})
// TestA要触发事件 bus.$emit('TestA组件中声明的事件名', '值')
// 声明一个全局组件TestB
Vue.component('TestB',{
data(){
return {
text: ""
}
},
template:`
<h2>{{ text }}</h2>
`,
created(){
// 声明事件
bus.$on('testData', (val) => { // 注意这里用箭头函数
this.text = val
})
}
});
// 声明一个全局组件TestA
Vue.component('TestA',{
data(){
return {
msg: "我是子组件TestA的数据"
}
},
template:`
<button @click="clickHandler">TestA组件中按钮</button>
`,
methods:{
// 定义触发的函数
clickHandler(){
console.log(bus);
bus.$emit('testData', this.msg)
}
}
});
// 声明一个局部组件Vheader
let Vheader = {
data(){
return {}
},
template:`
<div class="vheader">
<TestA></TestA>
<TestB></TestB>
</div>
`,
};
// 声明一个局部组件App
let App = {
data(){
return {}
},
template:`
<div class="app">
<Vheader></Vheader>
</div>
`,
components:{
Vheader // 挂载局部组件Vheader
}
};
// 根组件,可以没有template属性,直接在el中使用子组件
new Vue({
el: '#app',
data() {
return {}
},
components:{
App // 挂载局部组件App
}
})
</script>
总结:(以A->B传值为例)
1)声明一个Vue对象(bus对象),只是用来平行组件间传值;
2)B要声明事件 bus.$on('事件的名字', function(val){});
3)A要触发事件 bus.$emit('TestA组件中声明的事件名', '值');
4)注意:记住平行组件传值前提是这两个方法必须绑定在同一个实例化对象(bus)上;
六、补充知识点
1、关于this指向的问题,与vm实例没有任何关系,而是与箭头函数和普通函数的区别。总结两点:
1)es5的普通函数,this指向是指向了调用者,比如vue实例的方法(在methods中声明了一个方法)是由vue实例vm调用的,所以this指向vm。
2)箭头函数的this指向它的调用者所在的上下文,也就是vm实例所在的上下文(定义vm的父类),即window。
2、vuejs官网中的组件注册部分解读
3、将vue添加至chorme
翻墙!!!
Vue(2)- v-model、局部组件和全局组件、父子组件传值、平行组件传值的更多相关文章
- Vue 2 --v-model、局部组件和全局组件、父子组件传值、平行组件传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
- Django---FORM组件.FORM组件的字段,FORM组件校验流程,FORM组件的全局和局部钩子,FORM和Model的组合
Django---FORM组件.FORM组件的字段,FORM组件校验流程,FORM组件的全局和局部钩子,FORM和Model的组合 一丶FORM的介绍 1.生成页面可用的HTML标签 2.对用户提交的 ...
- Vue组件之全局组件与局部组件
1全局注册实例 <div id="app"> <com-btn></com-btn> <com-btn></com-btn&g ...
- 前端(二十二)—— vue组件:局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList
Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...
- Django学习笔记(14)——AJAX与Form组件知识补充(局部钩子和全局钩子详解)
我在之前做了一个关于AJAX和form组件的笔记,可以参考:Django学习笔记(8)——前后台数据交互实战(AJAX):Django学习笔记(6)——Form表单 我觉得自己在写Django笔记(8 ...
- vue初始化、数据处理、组件传参、路由传参、全局定义CSS与JS、组件生命周期
目录 项目初始化 组件数据局部化处理 子组件 父组件 路由逻辑跳转 案例 组件传参 父传子 子组件 父组件 子传父 子组件 父组件 组件的生命周期钩子 路由传参 第一种 配置:router/index ...
- vue项目组件的全局注册
在vue-cli项目中,我们经常会封装自己的组件,并且要在多个界面中引用它,这个时候就需要全局注册组件. 首先我们会封装自己的组件,比如twoDimensionTable文件夹下的index.vue: ...
- vue项目中设置全局引入scss,使每个组件都可以使用变量
在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...
- Django框架(十四)-- forms组件、局部钩子、全局钩子
一.什么是forms组件 forms组件就是一个类,可以检测前端传来的数据,是否合法. 例如,前端传来的邮箱数据,判断邮件格式对不对,用户名中不能以什么开头,等等 二.forms组件的使用 1.使用语 ...
随机推荐
- 折腾gcc/g++链接时.o文件及库的顺序问题(转)
转自: http://www.cnblogs.com/OCaml/archive/2012/06/18/2554086.html#sec-1-1 折腾gcc/g++链接时.o文件及库的顺序问题 Tab ...
- Thrall’s Dream 第四届山东省省赛 (直接暴力DFS)
题目链接:题目 AC代码: #include<iostream> #include<algorithm> #include<vector> #include< ...
- What is Web Application Architecture? How It Works, Trends, Best Practices and More
At Stackify, we understand the amount of effort that goes into creating great applications. That’s w ...
- Mysql root密码忘记的解决办法
Windows 版本: 1.打开安装目录下的my.ini 找到 [mysqld] 在下面加入 skip-grant-tables 2. 重启mysql服务 3.打开命令行 依次输入 USE mysql ...
- CentOS平滑升级Nginx
服务器:CentOS 6.4 64位 升级方案:nginx1.4.0 – nginx1.4.3 Nginx编译后就一个小文件,不带动态库,升级也可以无缝升级,并不影响访问,按下面的命令执行就可以,具体 ...
- Flume示例
建议参考官方文档:http://flume.apache.org/FlumeUserGuide.html 示例一:用tail命令获取数据,下沉到hdfs 类似场景: 创建目录: mkdir /home ...
- Disillusioning #1 水题+原题赛(被虐瞎)
https://vijos.org/tests/542c04dc17f3ca2064fe7718 好一场 水题 比赛啊 t1直接上暴力费用流10分QAQ,虽然一开始我觉得可以不用的,直接dfs可以得出 ...
- 简单的TableView
背景知识 每个表都是UITableView的实例,表中的每一行都是UITableViewCell的实例. TableView的种类 Grouped table Plain table without ...
- html 复选框(checkbox)和单选框(radio)与文字水平垂直居中对齐
对 input与label同时设置CSS input,label{ vertical-align:middle; }
- Mysql数据库存储是乱码问题(或者在查询时无法加载数据)
在连接数据库时添加一行代码即可解决:?useUnicode=true&characterEncoding=utf8 截图如下: