码迷,mamicode.com
首页 > 其他好文 > 详细

vue中组件间的传参

时间:2019-03-30 01:21:20      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:new   code   nbsp   传递   自定义属性   mit   span   pre   属性   

1.父传子

  父组件准备一个数据,通过自定义属性给子组件赋值,进行传递

  在子组件中通过 props 属性来接收参数

<body>
    <div id="app">
        <son passdata="msg"></son>
    </div>
</body>
<script>
    Vue.component(‘son‘, {
        template: ‘<div>父组件的数据为:{{ passdata }}</div>‘,
        props: [‘passdata‘]
    })
    new Vue({
        el: ‘#app‘,
        data: {
            msg: ‘父组件数据‘
        }
    })
</script>

 

2.子传父

 

  在子组件准备一个数据,通过 this.$emit(‘自定义事件‘, ‘参数‘),进行传递。this.$emit 相当于要执行子组件的自定义事件,并且传入参数
  在父组件中给子组件注册好自定义事件,并且实现这个方法,就可以得到参数了。<son @自定义事件="getval">

<body>
    <div id="app">
     //myevent是子组件中的事件 <son @myevent=‘getVal‘></son> </div> </body> <script> Vue.component(‘son‘, {
     //①通过事件触发passval方法 template: `<div>给父组件传参<button @click="passval">传参</button></div>`, data(){ return { son: ‘son数据‘ } }, methods: { passval(){
          //②执行子组件中的myevent事件,通过$emit进行传递(this.son为传递的数据) this.$emit(‘myevent‘, this.son) } } }) new Vue({ el: ‘#app‘, methods: {
       //③value就是传递过来的数据 getVal(value){ console.log(value) } } }) </script>

 

3.并列组件传参

  创建一个公用的 bus (vue 实例)  var vm = new Vue()

  在 A 组件传入数据  vm.$emit(‘passval‘, this.name)

  在 B 组件接收数据  vm.$on(‘passval‘ ,function(value){})

 

<body>
    <div id="app">
        <coma></coma>
        <comb></comb>
    </div>
</body>
<script>
  //①创建一个公共实例 var vm = new Vue() Vue.component(‘coma‘, {
     //通过事件触发 myclick方法去传参 template: `<div><button @click="myclick"></button></div>`, data() { return { name: ‘coma‘ } }, methods: { myclick: function(){
          //向公共实例传入数据 vm.$emit(‘passval‘, this.name) } } }) Vue.component(‘comb‘, { template: `<div>comb</div>`, mounted() {
        //接收数据 vm.$on(‘passval‘, function(value){ console.log(value) }) } }) new Vue({ el: ‘#app‘ }) </script>

  

vue中组件间的传参

标签:new   code   nbsp   传递   自定义属性   mit   span   pre   属性   

原文地址:https://www.cnblogs.com/xhrr/p/10624834.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!