Vue.js組件的通訊之父組件向子父組件的通訊

時間 2019-11-08

原文原文鏈接

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

<template id="parentComp">
　　　　<div>
　　　　　　I am parent component:{{msg}},The Data from child:{{msg2}}
　　　　　　<hr>
　　　　　　
　　　　　　<child @child="parentFn"></child>
　　　　</div>
　　</template>vue

　　<template id="childComp">
　　　　<div>I am child component:{{msg}}</div>
　　</template>
　　<body>app

　　<script>
　　　　let child={
　　　　　　template:'#childComp',
　　　　　　data(){
　　　　　　　　return {
　　　　　　　　　　msg:'child Data'
　　　　　　　　}
　　　　　　},
　　　　　　mounted(){
　　　　　　/*this.$emit('自定義事件名',數據);*/
　　　　　　　　this.$emit('child',this.msg);
　　　　　　}
　　　　};

　　　　let parent={
　　　　　　template:'#parentComp',
　　　　　　data(){
　　　　　　　　return {
　　　　　　　　　　msg:'parent Data',
　　　　　　　　　　msg2:''
　　　　　　　　}
　　　　　　},
　　　　　　components:{
　　　　　　　　child
　　　　　　},
　　　　　　methods:{
　　　　　　　　parentFn(data){
　　　　　　　　　　this.msg2=data;
　　　　　　　　}
　　　　　　}
　　　　};函數

　　<div id="app">
　　　　<parent></parent>
　　</div>
　　</body>
</html>component

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。