親コンポーネントから子親コンポーネントへの Vue.js コンポーネントの通信 (コード)-jsチュートリアル-php.cn

親コンポーネントから子親コンポーネントへの Vue.js コンポーネントの通信 (コード)

高洛峰

リリース： 2017-03-12 11:34:51

オリジナル

1295 人が閲覧しました

今回の記事 Vue.js親コンポーネントから子親コンポーネントへのコンポーネントの通信(コード)

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

　　<template id="parentComp">
　　　　<p>
　　　　　　I am parent component:{{msg}},The Data from child:{{msg2}}
　　　　　　<hr>
　　　　　　<!-- <child @自定义事件名="父方法"></child> -->
　　　　　　<child @child="parentFn"></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;
　　　　　　　　}
　　　　　　},
　　　　　　mounted(){
　　　　　　/*this.$emit(&#39;自定义事件名&#39;,数据);*/
　　　　　　　　this.$emit(&#39;child&#39;,this.msg);
　　　　　　}
　　　　};

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

　　　　window.onload=function(){ 
　　　　　　new Vue({
　　　　　　　　el:&#39;#app&#39;,
　　　　　　　　components:{
　　　　　　　　　　parent
　　　　　　　　}
　　　　　　});
　　　　}
　　　　/*父元素向子元素通信关键总结：
　　　　　　1：在嵌套的子元素(使用时)上：<child @自定义事件名="父方法"></child>;
　　　　　　2：子元素在加载完成的钩子函数（mounted）上加一个方法:this.$emit(&#39;自定义事件名&#39;,数据);
　　　　　　3：父元素上的方法:父方法名(data){...}
　　　　*/
　　</script>

　　<p id="app">
　　　　<parent></parent>
　　</p>
　　</body>
</html>

ログイン後にコピー

以上が親コンポーネントから子親コンポーネントへの Vue.js コンポーネントの通信 (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。