vue学习（三）组件传值
组件
官网(https://cn.vuejs.org/v2/guide/components.html)
组件分为局部组件和全局组件
局部组件：是内容中国的一部分 只是在当前组件加载的时候
全部组件：如：导航栏 侧边栏 运用到任意地方
一 局部组件
简单版
<div id="app">
<!--3. 用子-->
<App></App>
</div> <script>
// App 组件 有 template + css + js
// 1 生子
const App = {
template:`<h3>我是App组件</h3>`
}; let app = new Vue({
el:'#app',
data:{ },
// 2.挂子
components:{
App
}
})
</script>
复杂版-----主要是在生子处
<div id="app">
<!--3. 用子-->
<App></App>
</div> <script>
// App 组件 有 template + css + js
// 1 生子
// 在组件中的data数据 必须是一个函数，返回一个对象
const App = {
data() {
return {
msg: '我是App组件1'
}
},
// template 标签必须在一个
template: `
<div>
<h3>{{ msg }}</h3>
<button @click="handelClick">提交</button>
</div> `,
methods:{
handelClick(){
alert(123)
}
} }; let app = new Vue({
el: '#app',
data: {},
// 2.挂子
components: {
App
} })
</script>
二 全局组件
全局组件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width ,initial-scale=1">
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<script src="vue.js"></script>
</head>
<body> <div id="app">
<!--3. 用子-->
<App></App>
</div> <script>
// 定义一个全局组件 Vue.component('Vheader',{
template:`<h1>我的导航组件</h1>`
});
Vue.component('Vaside',{
template:`<h1>我的左侧导航</h1>`
});
// 局部组件
const VConent = {
template: `
<div>
<h1>我是内容局部组件</h1>
</div> `
}; const App = {
components:{
VConent // 挂载子组件
},
template: `
<div>
<Vheader></Vheader>
<Vaside></Vaside>
<VConent></VConent>
</div> ` }; let app = new Vue({
el: '#app',
data: {},
// 2.挂子
components: {
App
} })
</script> </body>
</html>
父传子组件
① 在子组件中写 props=[xxx] 接收父组件挂载的属性---也可以接收对象 【可以参考vue（四）作用域插槽】
② 父组件中 绑定 xxx=‘msg’
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width ,initial-scale=1">
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<script src="vue.js"></script>
</head>
<body> <div id="app">
<!--3. 用子-->
<App></App>
</div> <script> Vue.component('Vchild',{
template:`
<div>
<div style="color: red">我是子组件</div>
<h3>{{ childMsg }}</h3>
</div>
`,
props:['childMsg']
});
const App = {
data(){
return{
msg:'我是父组件传值'
}
}, template: `
<div>
<Vchild :childMsg="msg"></Vchild>
</div>
`
}; let app = new Vue({
el: '#app',
data: {},
// 2.挂子
components: {
App
} })
</script> </body>
</html>
子传父
① 在父组件中要绑定自定义事件 如： @input="inputHandler"
② 在子组件中触发原生事件，在事件函数中通过this.$emit触发自定义事件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width ,initial-scale=1">
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<script src="vue.js"></script>
</head>
<body> <div id="app">
<!--3. 用子-->
<App></App>
</div> <script> // 子组件 // 子传父
// ① input框 在inputHandler使用
Vue.component('Vchild', {
template: `
<div>
<div style="color: red">我是子组件</div>
<h3>{{ childMsg }}</h3>
<input type="text" @input="inputHandler">
</div>
`,
props: ['childMsg'],
methods: {
inputHandler(e) {
// console.log(e.target.value)
const val = e.target.value;
this.$emit('Handlerinput', val)
}
}
});
// 父组件
const App = {
data() {
return {
msg: '我是父组件传值',
newVal:''
}
},
methods:{
inputVal(newVal){
this.newVal = newVal
}
},
template: `
<div>
<Vchild :childMsg="msg" @Handlerinput="inputVal"></Vchild>
<div class="father">
数据：{{ newVal }}
</div>
</div>
`
};
let app = new Vue({
el: '#app',
data: {},
// 2.挂子
components: {
App
} })
</script> </body>
</html>
平行通信
① 创建一个 bus
② 通过bus.$on 绑定事件
③ 通过 bus.$emit 触发事件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width ,initial-scale=1">
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<script src="vue.js"></script> </head>
<body> <div id="app">
<App></App>
</div> <script> const bus = new Vue(); Vue.component('B', {
data(){
return {
count:0
}
},
template: `<div>{{count}}</div>`,
// 当组件被创建出来的时候 就会立即被调用
created(){
// $on 绑定事件
bus.$on('add',(n)=>{
this.count+=n
})
}
});
Vue.component('A', {
template: `
<button @click="handleClick">加入购物车</button>
`,
methods:{
handleClick(){
// $emit 触发事件
bus.$emit('add',1);
}
}
}); const App = {
template: `
<div>
<A></A>
<B></B>
</div> `
}; let app = new Vue({
el: '#app',
components: {
App
} })
</script> </body>
</html>
组件通信其他方式（provide和inject）
在父组件中 provide 中提供变量，然后在子组件中通过inject来注入变量，无论组件嵌套多深，只要是调用了inject 就能拿到父组件中的变量
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width ,initial-scale=1">
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<script src="vue.js"></script> </head>
<body> <div id="app">
<App></App>
</div> <script> Vue.component('A', {
inject:['msg'], // 数组接收
template: `<div>{{msg}}</div>`, }); const App = {
provide(){
return{
msg:'老爹的数据'
}
},
template: `
<div>
<A></A>
</div> `
}; let app = new Vue({
el: '#app',
components: {
App
} })
</script> </body>
</html>
vue学习（三）组件传值的更多相关文章
- day 82 Vue学习三之vue组件
Vue学习三之vue组件 本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...
- Vue.js之组件传值
Vue.js之组件传值 属性传值可以从父组件到子组件,也可以从子组件到父组件. 这里讲一下从父组件到子组件的传值 还以上次的demo为例,demo里有APP.vue是父组件,Header.vue,Us ...
- day 83 Vue学习三之vue组件
本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(componen ...
- Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级
(四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...
- React学习笔记(三) 组件传值
组件嵌套后,父组件怎么向子组件发送数据呢? 答案是: this.props <script type="text/babel"> var MyFirst = React ...
- Vue学习之组件切换及父子组件小结（八）
一.组件切换: 1.v-if与v-else方式: <!DOCTYPE html> <html lang="en"> <head> <met ...
- vue学习之组件
组件从注册方式分为全局组件和局部组件. 从功能类型又可以分为偏视图表现的(presentational)和偏逻辑的(动态生成dom),推荐在前者中使用模板,在后者中使用 JSX 或渲染函数动态生成组件 ...
- Vue中非父子组件传值的问题
父子组件传值的问题,前面已经讲过,不再叙述,这里来说一种非父子组件的传值. vue官网指出,可以使用一个空vue实例作为事件中央线! 也就是说 非父子组件之间的通信,必须要有公共的实例(可以是空的), ...
- 三 vue学习三 从读懂一个Vue项目开始
源码地址: https://github.com/liufeiSAP/vue2-manage 我们的目录结构: 目录/文件 说明 build 项目构建(webpack)相关代码. config ...
- Vue 常用三种传值方式
Vue常用的三种传值方式: 父传子 子传父 非父子传值 引用官网一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消 ...
随机推荐
- threading 多线程
# coding:utf- import time from threading import Thread def foo(x):#这里可以带参数def foo(x) print "foo ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：自适应大小的按钮组
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- java 根据传入的时间获取当前月的第一天的0点0分0秒和最后一天的23点59分59秒
/** * 获取指定日期所在月份开始的时间 * lkeji * @return */ public static String getMonthBegin(String specifiedDay) { ...
- Ayoub's function
思维,就是反过来想,题解太强了 #include <bits/stdc++.h> using namespace std; int main() { long long t; cin> ...
- centos安装sass环境必看
首先了解一下 sass是什么?! sass号称“世界上最成熟.最稳定.最强大的专业级css扩展语言” ,sass基于于Ruby语言开发而成,因此安装sass前需要安装Ruby, 1.安装ruby y ...
- 谈谈HashSet的存储原理及为什么重写equals必须重写hashcode方法
HashSet的存储原理: 1.将要传入的数据根据系统的hash算法得到一个hash值: 2.根据hash值可以得出该数据在hash表中的位置: 3.判断该位置上是否有值,没有值则把数据插入进来:如果 ...
- 044、Java中逻辑运算之向左边移位2位实现功能
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...
- 008-PHP定义数组
<?php /*定义数组$Cities[]*/ $Cities[0] = "北京"; $Cities[1] = "天津"; $Cities[2] = &q ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-ok
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- c#使用Socket实现局域网内通信
服务器端代码: using System; using System.Collections.Generic; using System.ComponentModel; using System.Da ...