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 给子组件下发数据,子组件通过事件给父组件发送消 ...
随机推荐
- primecoin在ubuntu16.04上部署服务：
primecoin在ubuntu16.04上部署服务: 一.下载Tomcat,Jdk,primecoin(公司内部文件) 注意Tomcat版本需要高于Jdk的,不然会报错. 二.把它们都解压到你要的安 ...
- 深入 Laravel 资料
深入 Laravel 核心 Learning_Laravel_Kernel laravel 源码详解
- 与Python的第一次见面
1.Python的起源 Python的作者,Guido von Rossum,确实是荷兰人.1982年,Guido从阿姆斯特丹大学(University of Amsterdam)获得了数学和计算机硕 ...
- H5禁止底部横向滚动条，使一个元素居中
1.禁止底部横向滚动条 选择元素设置样式 { overflow-y:auto; overflow-x:hidden } 2.元素居中 { margin-left:auto ; margin-right ...
- MySQL复制(一)--复制概述
MySQL复制(replication)文档集合:1.复制概述2.基于二进制日志文件位置(binlog)配置复制3.基于全局事物标识符(GTID)配置复制4.多源复制5.级联复制6.半同步复制7.延迟 ...
- 深入理解python（三）python字符编码和字符串处理
说是有选择和循环分支,,也实在没有什么比较大的坑要注意的,所以就直接进入比较令人困扰的地方 unicode和字符串 这个地方是一直以来我比较头痛的地方,因为坑比较多而且python3和python2在 ...
- shell和Makefile
一.shell基础 1.shell介绍 shell是操作系统的终端命令行 意义:快速的编译多个.c文件 shell是一类编程语言 常用shell语言:sh.bash.csh.ksh.perl.pyth ...
- AssetBundle打包依赖（宽宽又欠我一顿烧烤）
using UnityEngine; using System.Collections; using UnityEditor; public class dabao : EditorWindow { ...
- JVM性能调优指南
1.JVM的参数类型 1.1 标准参数:在各jdk版本中较稳定 -help -server -client -version -showversion -cp -classpath 1.2 X参数 1 ...
- arm linux 移植 PHP
背景: PHP 是世界上最好的语言. host平台 :Ubuntu 16.04 arm平台 : 3531d arm-gcc :4.9.4 php :7.1.30 zlib :1.2.11 libxml ...