Vue组件基础

  • 纯属随笔记录,具体详细教程,请查阅vue.js网站

子组件给父组件传值:

<body>
<div id="app">
<my-app></my-app>
</div>
</body> <template id="appTem">
<div>我是---{{ msg }}
<my-banner @lalala='getData'></my-banner>
</div> </template> <template id="bannerTem">
<div>我是--- <button @click='setData'>这里是轮播图banner</button>
</div>
</template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//定义一个组件
const Banner = {
template: '#bannerTem',
methods: {
setData() {
this.$emit('lalala', '我是子组件my-banne的值') }
},
} //定义一个组件
const App = {
template: '#appTem', //提取组件中的模板
data() { //组件的data是一个函数,返回的是一个对象
return {
msg: '头部组件',
a: 212
}
},
components: {
'my-banner': Banner,
},
methods: {
getData(str) {
console.log(str); }
}
} const app = new Vue({
el: '#app',
// data:{ // },
components: {
'my-app': App
}
})
</script>

父组件给子组件传值:

<body>
<div id="app">
<my-heade></my-heade>
</div>
</body>
<template id="headeTm">
<div>
我是heade组件
<my-banner :bar='msg'></my-banner>
</div>
</template> <template id="bannerTm">
<div>
我是banner组件
{{ bar }}
</div>
</template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//定义一个banner组件
const Banner = {
template: '#bannerTm',
props: {
bar: {
type: String
}
}
} //定义一个heade组件
const Heade = {
template: '#headeTm',
components: {
'my-banner': Banner
},
data() {
return {
msg: '我是父组件的值'
}
}
}
const app = new Vue({ el: '#app',
components: {
'my-heade': Heade
} })
</script>

非父子组件间传值:

<body>
<div id="app">
<my-app></my-app>
</div>
</body>
<template id="appTm">
<div>我是最外面的app <my-banner></my-banner>
<my-bannerindex></my-bannerindex>
</div>
</template> <template id="bannerTm">
<div>
这里是banner
<button @click='getIndex(1)'>1</button>
<button @click='getIndex(2)'>2</button>
<button @click='getIndex(3)'>3</button>
<button @click='getIndex(4)'>4</button>
</div>
</template> <template id="barindexTm">
<div>
{{ index }}
</div>
</template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> //中央事件总线,也就是实例化一个Vue
const bus=new Vue(); const BarIndex={
template:'#barindexTm',
data(){
return{
index:''
}
},
mounted() {
// 2、监听事件
that=this;
bus.$on('changeIndex',function(index){//(index)=>{this.index=index}
// console.log(index); that.index=index; })
},
} const Banner={
template:'#bannerTm',
methods: {
getIndex(value){
bus.$emit('changeIndex',value)
}
}, } const App={
template:'#appTm',
components:{
'my-banner':Banner,
'my-bannerindex':BarIndex
}
} const app =new Vue({
el:'#app',
components:{
'my-app':App
}
}) </script>

Vue父子,子父,非父子组件之间传值的更多相关文章

  1. vue第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 )

    第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...

  2. vue组件之间传值方式解析

    vue组件之间传值方式解析一.父组件传到子组件 1.父组件parent代码如下: <template> <div class="parent"> <h ...

  3. 4-react 组件之间传值。

    1.传值: 都是使用props和state结合得方式进行组件之间得传值 再react中传值得话是父子组件之间得传值,一般会把父组件中得state值通过props传给子组件,再子组件中使用props进行 ...

  4. 从0开始探究vue-组件化-组件之间传值

    理解 Vue中有个非常重要的核心思想,就是组件化,组件化是为了代码复用 什么是组件化 组件化,就像一个电脑主机里的主板,有内存条的插口,有硬盘,光驱等等的插口,我们的项目,就像一个电脑主机,通过各种组 ...

  5. react 组件之间传值

    谈及React时,就会想到一个很重要的思想,就是组件化思想.它将可以重用的部分进行组件化开发,形成一个个相对独立的组件,那么组件化后,你也会提出些疑问,组件与组件之间,将怎样进行信息的传递呢?下面来介 ...

  6. react组件之间传值方式

    1.父向子(通过props传值) 2.父向更深层的子(通过context传值) 3.子向父(通过回调函数传值:在父组件中创建一个函数来接收子组件传过来的参数值,通过父组件将这个函数做为子组件的属性传递 ...

  7. vue.js 创建组件 子父通信 父子通信 非父子通信

    1.创建组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  8. vue 父子组件传值以及方法调用,平行组件之间传值以及方法调用大全

    vue项目经常需要组件间的传值以及方法调用,具体场景就不说了,都知道.基本上所有的传值都可以用vuex状态管理来实现,只要在组件内监听vuex就好. vue常用的传值方式以及方法有: 1. 父值传子( ...

  9. vue父子组件之间传值

    vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...

随机推荐

  1. 讨厌的linux----vsftpd 匿名上传配置

    核心一句话: vsftpd: refusing to run with writable anonymous root 匿名账号的根目录,不允许写入,否则匿名登录 验证失败 只有再 ftp 命令操作, ...

  2. Celery 服务搭建

    整个项目工程如下 __init__.py """ 注意点:python3.7 需要执行 pip install --upgrade https://github.com/ ...

  3. Android仿微信QQ等实现锁屏消息提醒

    demo代码如下: import android.content.Intent; import android.os.Bundle; import android.support.v7.app.App ...

  4. Golang指针与unsafe

    前言 我们知道在golang中是存在指针这个概念的.对于指针很多人有点忌惮(可能是因为之前学习过C语言),因为它会导致很多异常的问题.但是很多人学习之后发现,golang中的指针很简单,没有C那么复杂 ...

  5. java面试题实战三

    华为优招面试经验. 1.笔试(这部分按照华为以前的风格不会为难人的,认真做AC一道题就可以进面试了,我编程能力一般吧,做了一道半而已,-_-||!) 2.测评(性格测试,不要太偏激就行了) 3.面试分 ...

  6. C语言设计模式

    一 .C语言和设计模式(继承.封装.多态) C++有三个最重要的特点,即继承.封装.多态.我发现其实C语言也是可以面向对象的,也是可以应用设计模式的,关键就在于如何实现面向对象语言的三个重要属性. ( ...

  7. 查看表空间使用情况(SQL)

    1: --查询表空间使用情况 2: SELECT Upper(F.TABLESPACE_NAME)         "表空间名", 3:        D.TOT_GROOTTE_ ...

  8. ArcGIS Server 10.2忘记用户名密码的解决方案

    忘记了ArcGIS Server Manager的密码,可以采用以下方法进行重置. 1.找到ArcGIS Server的安装目录 D:\Program Files\ArcGIS\Server\tool ...

  9. myeclipse An internal error occurred during: "Initialize metrics".

    重新安装的myeclipse,在打开的时候弹出:    An internal error occurred during: "Initialize metrics". com/g ...

  10. Docker 两键创建 ZeroTier moon 节点

    一条命令创建 ZeroTier moon 节点: $ docker run --name zerotier-moon -d -p 9993:9993 -p 9993:9993/udp seedgou/ ...