一聚教程网:一个值得你收藏的教程网站

Vue通过ref父子组件拿值方法

时间:2018-09-14 11:19:23 编辑:猪哥 来源:转载

父拿子的值




 
 <script src="https://cdn.bootcss.com/vue/2.3.2/vue.min.js"></script>


<script> new Vue({ el: '#box', components: { 'v-tpl1': { template: '#tpl1', data(){ return { msg1: 'msg1' } }, methods: { //父组件定义一个方法通过refs拿到子组件的值 getChild(){ console.log(this.$refs.shit.msg2) } }, components: { 'v-tpl2': { template: '#tpl2', data(){ return { msg2: 'msg2' } } } } } } }) </script>

子拿父的值




 
 <script src="https://cdn.bootcss.com/vue/2.3.2/vue.min.js"></script>


<script> new Vue({ el: '#box', components: { 'v-tpl1': { template: '#tpl1', data(){ return { msg1: 'msg1' } }, components: { 'v-tpl2': { template: '#tpl2', data(){ return { msg2: 'msg2' } }, methods:{ getParent(){ console.log(this.$parent.msg1) } } } } } } }) </script>

有了ref拿值不能更方便~

文章评论

热门栏目