Vue.js组件的通信之子组件向父组件的通信（代码）-js教程-PHP中文网

Vue.js组件的通信之子组件向父组件的通信（代码）

高洛峰

发布： 2017-03-12 11:36:43

原创

1469人浏览过

这篇文章介绍vue.js组件的通信之子组件向父组件的通信（代码）

<!DOCTYPE html>
　　<html>
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>componentChildToParentCommunication</title>
　　　　<script src="js/vue.js"></script>
　　</head>

　　<template id="parentComp">
　　　　<p>
　　　　　　I am parent component:{{msg}},The Data from child:{{msg1}},{{msg2}}
　　　　　　<hr>
　　　　　　<child :m1="msg1" :m2="msg2"></child> 
　　　　</p>
　　</template>
　　<template id="childComp">
　　　　<p>I am child component:{{msg}}</p>
　　</template>

　　<body>

　　<script>
　　　　let child={
　　　　　　template:'#childComp',
　　　　　　data(){
　　　　　　　　return {
　　　　　　　　　　msg:'child Data'
　　　　　　　　}
　　　　　　},
　　　　　　props:['m1','m2']
　　　　};

　　　　let parent={
　　　　　　template:'#parentComp',
　　　　　　data(){
　　　　　　　　return {
　　　　　　　　　　mgs:'parent Data',
　　　　　　　　　　msg1:'the first parent Data',
　　　　　　　　　　msg2:'the second parent Data'
　　　　　　　　}
　　　　　　},
　　　　　　components:{
　　　　　　　　child
　　　　　　},
　　　　};

　　　　window.onload=function(){ 
　　　　　　new Vue({
　　　　　　　　el:'#app',
　　　　　　　　components:{
　　　　　　　　　　parent
　　　　　　　　}
　　　　　　});
　　　　}

　　　　/*子元素向父元素通信关键总结：
　　　　　　1：子元素定义时props:['msg1','msg2','msg3',...],用来放置从父元素拿过来的数据
　　　　　　2：在嵌套的子元素(使用时)上：<child  :msg1="父数据1" :msg2="父数据2" :msg3="父数据3"></child>;
　　　　*/
　　</script>
　　　　<p id="app">
　　　　　　<parent></parent>
　　　　</p>
　　</body>
</html>

登录后复制

以上就是Vue.js组件的通信之子组件向父组件的通信（代码）的详细内容，更多请关注php中文网其它相关文章！