vue2 子组件与父组件通讯

最新推荐文章于 2023-07-11 20:36:45 发布

fyinthesky

最新推荐文章于 2023-07-11 20:36:45 发布

阅读量167

点赞数 1

分类专栏： vue2 文章标签： vue2 子组件与父组件通讯

本文链接：https://blog.csdn.net/fyinthesky/article/details/87978028

版权

vue2 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> x</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
<style>
.bg_color_odd{
background-color:#0fa367;
}
.bg_color_even{
background-color:#f1f309;
}
.demo-alert-box{
background-color:#ff9931;
}
</style>

</head>
<body>
<h1>component</h1>
   <h2>子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件
父级组件可以通过 v-on 监听子组件实例的任意事件 </h2>
<hr>

   <div id="app">
       <div :style="{ fontSize: postFontSize + 'em' }">
       <btn-comp v-bind:class='{bg_color_even:isToggle}'
       v-bind:fpmessage='xmessage'
               v-on:toggle-text="toggleMethod"
               v-on:enlarge-text="postFontSize += 0.1"
               v-on:enlarge-text-par="enlargetextparMethod"
               v-on:small-text="postFontSize -= 0.1"
               v-on:small-text-par="postFontSize -= $event"

               ></btn-comp>
       </div>

</div>

<div id="app2">
<h1>component ues v-model</h1>
<hr>

<custom-input v-model="searchText"></custom-input>

<alert-box >{{alertmessage}} {{alertmessage2}}</alert-box>
<hr>
<h3>component v-bind:is 切换</h3>
<component v-bind:is="whichcomp"></component>
<button v-on:click="chooseComp('custom-input')">custom-input</button>
<button v-on:click="chooseComp('alert-box')">alert-box</button>
</div>

<script type="text/javascript">

       Vue.component('alert-box', {
       template: `
           <div class="demo-alert-box">
           <strong>Error!</strong>
           <slot></slot>
           </div>
       `
       })

       Vue.component('custom-input', {
       props: ['value'],
       template: `
           <input
           v-bind:value="value"
           v-on:input="$emit('input', $event.target.value)"
           >
       `
       })
   var app2 = new Vue({
el: "#app2",
           data:{
               searchText:'',
               alertmessage:'alert abc .',
               alertmessage2:' def .',
               whichcomp:''

           }
           ,methods:{

               chooseComp:function(event){

                   this.whichcomp =event
               }

           }})



   Vue.component('btn-comp',{
           data:function(){
           return {count:0}
           },
           props:['fpmessage']
           ,
           template:
           '<div >'+
           '<h3>{{fpmessage}}</h3> '+
           '<button v-on:click="count++">you click button {{count}} times.</button>'+
           '<button v-on:click="$emit(\'enlarge-text\')" > Enlarge text </button>'+
           '<button v-on:click="$emit(\'enlarge-text-par\',0.3)" > Enlarge text by param </button>'+
           '<button v-on:click="$emit(\'small-text\')" > Small text </button>'+
           '<button v-on:click="$emit(\'small-text-par\',0.2)" > Small text by param</button>'+
           '<button v-on:click="$emit(\'toggle-text\')" > toggle text </button>'+
           '</div>'

       })

var app = new Vue({
el: "#app",
data:{
               xmessage: 'ABC'   ,
               postFontSize:1,
               isToggle:true
},
           methods:{
               toggleMethod:function (){
               this.isToggle=!this.isToggle
               },

               enlargetextparMethod:function (enlargeAmount){
               this.postFontSize+=enlargeAmount
               }
           }
})





</script>
</body>
</html>

fyinthesky

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue2 子组件与父组件通讯

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫