Home > Article > Web Front-end > Communication of Vue.js components from child components to parent components (code)

Communication of Vue.js components from child components to parent components (code)

高洛峰Original: 2017-03-12 11:36:431243browse

This article introduces the communication of Vue.jsThe communication of the child component to the parent component (code)

<!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:&#39;#childComp&#39;,
　　　　　　data(){
　　　　　　　　return {
　　　　　　　　　　msg:&#39;child Data&#39;
　　　　　　　　}
　　　　　　},
　　　　　　props:[&#39;m1&#39;,&#39;m2&#39;]
　　　　};

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

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

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

The above is the detailed content of Communication of Vue.js components from child components to parent components (code). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Communication of Vue.js components from the parent component to the child parent component (code)Next article：Communication of Vue.js components from the parent component to the child parent component (code)

See more

Communication of Vue.js components from child components to parent components (code)

Related articles