vue组件之间的通信示例

最新推荐文章于 2022-06-12 15:58:09 发布

土豆也叫马铃薯

最新推荐文章于 2022-06-12 15:58:09 发布

阅读量167

点赞数

分类专栏： vue 文章标签： vue组件通信父组件子组件

本文链接：https://blog.csdn.net/qq_36306659/article/details/80382871

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

父组件传递数据给子组件=>

通过在子组件中写入传递参数props:{ childMs:{ type:String } } 或者第二种写法props:[ 'childMs' ]

子组件传递数据给父组件=>

子组件注册触发事件，父组件注册触发子组件事件后的方法写在method里面

源码贴上，有点小乱，不过可以很清楚看到组件之间是如何进行通信的

<!DOCTYPE html>
<html>
<head>
<title>组件之间的通信</title>
<meta charset="utf-8">
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<account>
</account>
</div>
<template id="tel">
<div>
<h1>父组件</h1>
<login :child-ms="ms" ></login>
<login v-on:child-say="listenToMyBoy"></login>

<p>页面中的两个button是由于渲染了两个login</p>
<p>do you like me ?{{childWords}}</p>
</div>
</template>

<template id="child-tel">
<div>

<h2>{{childMs}}</h2>
<button @click="onClickMe">传递数据给父组件</button>
</div>
</template>
<script type="text/javascript">
//定义一个账号组件
Vue.component('account' ,{
data(){
return {
ms:'我是源于父组件', //传递给子组件数据
childWords:""
}
},
template:"#tel",//在这里使用登录组件
components:{
'login':{
template:"#child-tel",
props:{
childMs:{
type:String
}
},
data(){
return {
somedate:"我是子组件的数据传递给父组件",
}
},
methods:{
onClickMe:function(){
this.$emit('child-say',this.somedate);
}
}
}//组件的名字叫做login
},
methods:{
listenToMyBoy:function(somedate){
this.childWords = somedate;
}
}
})
new Vue({
el:'#app'
})
</script>
</body>
</html>

土豆也叫马铃薯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue组件之间的通信示例

父组件传递数据给子组件=&gt; 通过在子组件中写入传递参数props:{ childMs:{ type:String } } 或者第二种写法props:[ 'childMs' ]子组件传递数据给父组件=&gt; 子组件注册触发事件，父组件注册触发子组件事件后的方法写在method里面源码贴上，有点小乱，不过可以很清楚看到组件之间是...
复制链接

扫一扫

专栏目录