vue2.0-组件传值
父组件给子组件传值，子组件用props接收
例子：两个组件，一个是父组件标签名是parent，一个是子组件标签名是child，并且child组件嵌套在父组件parent里，大概的需求是：我们子组件里需要显示父组件里的数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子组件接收父组件的的数据</title>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
</head>
<body>
<div id="box">
<parent></parent>
</div>
<script>
var vm=new Vue({
el:'#box',
//组件
components:{
//父组件 parent是标签名 template 是对应的模版 data 里是对应的数据
'parent':{
template:`
<div>
<h4>父组件</h4>
<child :receive-name="msg1"></child>
</div>`,
data(){
return {
msg:'我是父组件的第一条数据',
msg1:'我是父组件的第二条数据'
}
},
//子组件 child是标签名 template 是对应的模版 data 里是对应的数据
components:{
'child':{
template:`<div>
<h4>子组件</h4>
<p>子组件接收父组件的的数据：{{receiveName}}</p>
</div>`,
data(){
return {
msg1:'我是子组件的数据'
}
},
props:['receiveName']
}
}
}
}
});
</script>
</body>
</html>
子组件child用props接收父组件parent里的数据，props：[]里的参数是用来接收父组件数据的名字，为了方便用了receiveName，然后我们需要在父组件里的子组件标签child上动态绑定receiveName，由于vue推荐有大小写的英文用-，（receiveName->receive-name）,v-bind：属性名可以成简写：属性名,:receive-name="父组件的数据",父组件的数据有msg,msg1。子组件需要哪个就用那个,这样看起来是不是很方便。
子组件通过事件向父组件发送自己的数据，监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
this.$emit(event,...args);
/*
* event: 要触发的事件
* args: 将要传给父组件的参数
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子组件向父组件传值</title>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
</head>
<body>
<div id="box">
<parent></parent>
</div>
<script>
var vm=new Vue({
el:'#box',
//组件
components:{
//父组件 parent是标签名 template 是对应的模版 data 里是对应的数据
'parent':{
template:`
<div>
<h4>父组件</h4>
<p>父组件接收到子组件的数据是：{{parentMsg1}}</p>
<child v-on:listenChildEvent="showChildMsg"></child>
</div>`,
data(){
return {
parentMsg:'我是父组件的第一条数据',
parentMsg1:'' }
},
methods:{
showChildMsg(data){
// console.log(data);
this.parentMsg1=data;
}
},
//子组件 child是标签名 template 是对应的模版 data 里是对应的数据
components:{
'child':{
template:`<div>
<h4>子组件</h4>
<button v-on:click="sendMsgToParent">发送子组件数据给父组件</button>
</div>`,
data(){
return {
childMsg:'我是子组件的数据'
}
},
methods:{
sendMsgToParent(){
let childData=this.childMsg;
this.$emit('listenChildEvent',childData)
}
}
}
}
}
}
});
</script>
</body>
</html>
最后我们来简单总结下本例子：
1.在子组件中创建一个按钮，给按钮绑定一个点击事件
2.在响应该点击事件的函数中使用$emit来触发一个自定义事件（listenToChildEvent），并传递一个参数（childData），childData就是子组件的数据。
3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法 ：showChildMsg ,该方法带一个参数即是子组件的额外参数,在子组件里数据已经赋值给这个额外参数,所以最后获取到的参数就是子组件的值
4.保存修改的文件，在浏览器中点击按钮，父组件获取到子组件的数据
细结：
- 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
- 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
- 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
非父子组件传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>非父子组件通信</title>
<script src="https://cdn.bootcss.com/vue/2.5.5/vue.js"></script>
</head>
<body>
<div id="example">
<counter></counter>
<counte></counte>
</div>
</body>
<script>
var vm=new Vue();
//创建兄弟组件A
var A={
template:`
<div>
<span>{{a}}</span>
<button @click="send">点击发送数据给B组件</button>
</div>
`,
data(){
return {
a:'我是A组件的数据'
}
},
methods:{
send(){
vm.$emit('msga',this.a)
}
}
};
//创建兄弟组件B
var B={
template:`
<div>
<span>我是B组件->{{a}}</span>
</div>
`,
data(){
return {
a:''
}
},
mounted(){
vm.$on('msga',function(a){
this.a=a;
}.bind(this));
}
}; //注册A B组件
new Vue({
el:'#example',
components:{
'counter':A,
'counte':B
}
});
</script>
</html>
以上就是组件之间的传值了，如果小伙伴们有任何疑问，欢迎留言！小编会及时回复。谢谢对博客园的支持！
vue官网链接：https://cn.vuejs.org/
vuex官网链接：https://vuex.vuejs.org/zh-cn/
axios网站链接：https://www.npmjs.com/package/axios
vue2.0-组件传值的更多相关文章
- vue2.0组件传值
props down emit up 嘿嘿 如果是第一次接触vue2.0组件传值的肯定很疑惑,这是什么意思(大神总结的,我也就是拿来用用) “down”—>指的是下的意思,即父组件向子 ...
- 通信vue2.0组件
vue2.0组件通信各种情况总结与实例分析 Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用p ...
- vue2.0组件库
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...
- vue2.0 组件化及组件传值
组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下, ...
- vue2.0组件之间的传值
1.父子组件--props props:需要注意的是,虽然的是单向的数据流,但是如果传递的是数组或是对象这样的引用类型,子组件数据变化,父组件的数据通也会变化 子组件代码 <template&g ...
- Vue2.0组件间数据传递
Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有 ...
- Vue2.0组件之间通信（转载）
Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...
- Vue2.0组件之间通信
Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...
- Vue2.0+组件库总结
转自:https://blog.csdn.net/lishanleilixin/article/details/84025459 UI组件 element - 饿了么出品的Vue2的web UI工具套 ...
- 转：Vue2.0+组件库总结
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...
随机推荐
- WikiBooks/Cg Programming
https://en.wikibooks.org/wiki/Cg_Programming Basics Minimal Shader(about shaders, materials, and gam ...
- Unity 5 Game Optimization (Chris Dickinson 著)
1. Detecting Performance Issues 2. Scripting Strategies 3. The Benefits of Batching 4. Kickstart You ...
- MySQL 安全整理
MySQL 安全整理 关闭外网的端口访问. 使用高位的端口号. 如果需要外网访问不给最高的权限. 如果需要外网访问也是绑定客户端. To be continued
- FastAdmin 生产环境升级注意
FastAdmin 生产环境升级注意 列出 FastAdmin 实际生产中升级注意事项. 安全相关,看 FastAdmin 的资讯. 如果使用 Git 更新生产文件,注意更新后的权限. JS 修改后注 ...
- 路由器外接硬盘做nas可行吗？
话说把家里的newifi mini升级到最新版后,又外接了个移动硬盘做nas,第一部就打算吧手机的视频移过去.一试才发现这速度慢的不行.只有几百kb 所以说,用是能用,单着速度也太慢了 再就是貌似硬盘 ...
- webpack 相关插件及作用（表格）
webpack 相关插件及作用: table th:first-of-type { width: 200px; } table th:nth-of-type(2) { width: 140px; } ...
- xcode Xcode_9.2.xip 官方离线下载地址
一.打开下面的链接 https://developer.apple.com/downloads/ 二.在左侧搜索框中搜索:xcode 三.展开你要下载的版本,点列表右边的蓝色链接如:Xcode 9.2 ...
- SDI工程时钟路径分析
SDI工程时钟路径分析 //------------- Receive Ports - RX Fabric Output Control Ports ------------- output rxou ...
- IntelliJ IDEA maven springmvc+shiro简单项目
搭建springmvc简单步骤如:http://www.cnblogs.com/grasp/p/9045242.html,这点就不在描述了. 新建和设置完工程的目录后,结构如下: pom.xml文件内 ...
- flex布局demo
flex布局 http://static.vgee.cn/static/index.html