vue组件之间的数据通信

组件之间的数据传递（通信）

1.父子组件

1).在组件内部定义另一个组件称为父子组件
2).子组件只能在父组件中使用
3).默认情况下，子组件是无法访问父组件的数据的

html部分：
<div class="box" id="app"><my-hello></my-hello></div><template id="hello"><div><p>我是hello组件</p><p>我是hello组件的数据：{{name}},{{age}},{{user.id}}</p><hr><my-world></my-world></div>
</template><template id="world"><div><p>我是world子组件</p></div>
</template>js部分：
var vm = new Vue({el: "#app",data:{},components:{"my-hello":{template:"#hello",data:function(){return {msg:"学习vue",name:"yang",age:27,user:{id:666, userName:"杨义"}}},components:{         // 子组件 在hello父组件内部"my-world":{template:"#world"}}}}
})

2.组件中的数据传递（通信）

2.1 子组件访问父组件的数据

a). 在子组件调用的时候，绑定需要访问的数据msg，并申明一个名字message。示例：<my-hello :message="msg"></my-hello>
b). 在子组件js内部，使用props来接受绑定的数据名c). 最后在使用的时候{{申明的数据名}} ===> {{message}}

html部分：<div class="box" id="app"><my-hello></my-hello></div><template id="hello"><div><p>我是hello组件</p><p>我是hello组件的数据：{{name}},{{age}},{{user.id}}</p><hr><my-world v-bind:message="msg"></my-world></div></template><template id="world"><div><p>我是world子组件</p><p>访问父组件的数据：{{message}}</p></div></template>js部分：var vm = new Vue({el: "#app",data:{},components:{"my-hello":{template:"#hello",data:function(){return {msg:"学习vue",name:"yang",age:27,user:{id:666, userName:"杨义"}}},components:{         // 子组件 在hello父组件内部"my-world":{template:"#world",props:['message']}}}}})

2.2 父组件访问子组件的数据

a).子组件使用 $emit发送数据给父组件，写法：this.$emit('事件名','需要发送的数据')

例：this.$emit('e-world',this.name,this,age)

b).子组件在父组件内调用的时候执行一个方法（@事件名="方法"），同时父组件自定义一个方法来接受子组件传过来的数据（例子中的getData方法）

例：<template id="world"><div><p>我是父组件</p><hello @e-world="getData"></hello></div></template>...// 这里是父组件内部的代码，不是vm根组件的代码data:{name:"",age:""},methods:{getData:function(name, age){this.name = name;this.age = age}}

3.父子组件间的单项数据流

父组件的数据一旦发生改变，子组件的数据会同步发生改变，反过来子组件数据改变时，父组件是不会改变的
而且子组件是不允许直接修改父组件的数据，会报错
解决方法：1).如果子组件想把父组件的数据拿到当成局部数据来使用，可以用一个变量存起来components:{"hello":{template:"#hello",props:["hellomsg"],     // 接受到父组件的hellomsg ==> <hello v-bind:hellomsg="msg"></hello>data:function(){return {usermsg:this.hellomsg   //  拿usermsg存起来当局部数据来使用}}}}2).如果子组件想修改拿到父组件的数据，并同步给父组件有两个方法：a).可以使用修饰符：sync  1.0支持 2.0-2.2不支持html部分使用：<hello v-bind:hellomsg.sync="msg"></hello>js部分需要在子组件内methods使用：this.$emit("update:需要修改的数据","修改后的数据")components:{"hello":{template:"#hello",props:["hellomsg"],  methods:function(){this.$emit("update:hellomsg","hello world")}}}b).因为js数据和对象都是引用类型指向同一内存空间，所以我们可以直接将父组件的数据包装成一个对象，修改对象的属性html部分使用：<hello v-bind:users="msg"></hello>js部分:users:{         // 父组件的属性，包装成一个对象age:18}-------------------------------------components:{"hello":{template:"#hello",props:["users"],  methods:function(){this.users.age = 100;}}}

4.非父子组件之间的通信

非父子组件之间的通信，可以通过一个空的vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件
1).var Event = new Vue();2).发送数据：Event.$emit("事件名","数据");
"my-b":{template:"#b",data:function(){return {age:18}},methods:{sendb:function(){Event.$emit("data-b",this.age)      // 发送age}}
}3).接受数据：Event.$on("事件名",data=>{})  es6箭头函数，可以防止改变this指向
"my-c":{template:"#c",data:function(){return {    age:""          // 初始化age的值}},mounted:function(){         // 钩子函数 当模版编译完成之后执行Event.$on("data-a",data => {this.name = data;})Event.$on("data-b",data => {        // 接受age == data是回调函数的参数this.age = data;            // 这里的this如果不是箭头函数那指向的会是全局的vue实例 - Event})}
}

slot内容分发

用于获取组件内的原内容
组件：
<template id="hello"><div><slot name="list1"></slot>      // 掉哟个slot时name = 组件调用时申明的slot名字      <p>{{name}}</p><slot name="list2"></slot></div>
</template>组件调用（中间带内容）指定一个slot的名字：
<hello><ul slot="list1"><li>aaa</li><li>bbb</li><li>ccc</li></ul><ol slot="list2"><li>111</li><li>222</li><li>333</li></ol>
</hello>js：
var vm = new Vue({el: "#app",data:{},components:{"hello":{template:"#hello",data:function(){return {name:"yang"}}}}
})

vue组件之间的数据通信相关推荐

[vue] vue组件之间的通信都有哪些？
[vue] vue组件之间的通信都有哪些? 父子Coms: 1/2/3 ..兄弟Coms: 4/5跨级Coms: 4/5/6/7props$emit/$on( $parents/$children ) ...
uniapp 子组件 props拿不到数据_谈一谈使用 webpack 开发时，Vue 组件之间的数据传递...
•我们在学习Vue的时候,难免会使用各个组件之间传递数据.•先来介绍一下Vue中组件传递的方式,有父组件传递给子组件数据,子组件传递给父组件数据,父组件直接获取子组件中数据,子组件直接获取父组件数据以 ...
vue组件之间互相传值：父传子，子传父
vue组件之间互相传值:父传子,子传父为什么要用到组件间传值? 答:组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据,也不能直接将子组件的数据传到父组件里面 ...
vue组件之间的传参总结
之前写的Vue 子父组件间的传值_WeiflR10的博客-CSDN博客一.父传子(prop) 第一步:在父组件中定义数据,例:tohome data () {return {tohome:" ...
描述vue组件之间的通信
##描述 vue组件之间的通信详细易懂,转自https://www.cnblogs.com/barryzhang/p/10566515.html
Vue 组件之间的传值方式有哪些？
Vue 组件之间的传值方式有哪些? 在平常写Vue项目时,组件传值必不可少,今天我们就要总结一下有哪些种方式呢? 1.父组件向子组件传值(用props) 子组件 <template>< ...
vue组件之间的传值（兄弟间的传值）
概要:vue组件之间的传值大致有三种:父传子,子传父,还有兄弟之间,今天我们主要来讲兄弟之间的传值.废话不多说,我们直奔主题 vue 组件兄弟间的传值是要通过一个事件总线来实现(可以把事件总线理解为一 ...
vue 组件之间传值父转子，子传父，同级别之间的传参，跨级别传参
写这篇文章之前,我对vue组件之间的传值,还是只知道一些基础的传值方式.虽然工作中勉强能够应对,但是想要行云流水感觉还是心有余而力不足,所以在此,我想总结一下vue组件之间的一些传值方式供大家参考,同 ...
vue组件之间的传值的几种方法
vue组件之间传值的几种方法总结一.父传子父传子技术就是把父组件中的数据传给子元素调用,用到的方法是 1.在父组件的子组件标签上绑定一个属性,挂载要传输的变量 ,语法是 :属性名 (冒号加属性名) ...
深入理解Vue 组件之间传值
一.父组件向子组件传递数据在 Vue 中,可以使用props向子组件传递数据. 子组件部分: 这是 header.vue 的 HTML 部分,logo 是在 data 中定义的变量. 如果需要从父组 ...

vue组件之间的数据通信

组件之间的数据传递（通信）

1.父子组件

2.组件中的数据传递（通信）

2.1 子组件访问父组件的数据

2.2 父组件访问子组件的数据

3.父子组件间的单项数据流

4.非父子组件之间的通信

slot内容分发

vue组件之间的数据通信相关推荐

最新文章

热门文章