vue父子组件传值和非父子组件之间的传值、插槽

1.父组件向子组件传值

父组件向子组件传值,通过属性的方式进行,子组件用props进行接收。

注意在这个传值过程中,有一个单向数据流规定,子组件不能直接修改父组件传递的值,因为如果父组件传递的值类型是引用类型的数据的话,在其他地方引用了这个值,那么子组件修改值得时候也会影响其他组件,如果一定要修改,可以复制一个副本,修改那个副本。

<div id="app"><counter :count="0"></counter></div>

<script>
 var counter = {
      props:['count'],
      data:function(){
        return {
          number:this.count//复制了一个副本,下面只需修改number,不再使用count
        }
      },
      template:'<div @click="handleClick">{{number}}</div>',
      methods:{
        handleClick:function(){
          this.number++
        },
      }
    }

 var vm = new Vue({
      el: "#app",
      components: {
        counter
      },
    })
</script>

2.子组件向父组件传值,通过$emit()给父组件传递一个事件,父组件监听这个事件

 <div id=app>
    <counter :count="0" @inc="handleInc"></counter>
    <counter :count="1" @inc="handleInc"></counter>
    <div>{{total}}</div>
  </div>

  <script>
    var counter = {
      props:['count'],
      data:function(){
        return {
          number:this.count
        }
      },
      template:'<div @click="handleClick">{{number}}</div>',
      methods:{
        handleClick:function(){
          this.number++
          this.$emit('inc',2)//可以后面携带很多个参数
        },
      }
    }

    var vm = new Vue({
      el:"#app",
      data:{
        total:1
      },
      components:{
        counter
      },
      methods:{
        handleInc:function(step){
          //alert(step)
          this.total+=step
        }
      }
    })
  </script>

3.非父子组件之间的传值

通过发布订阅模式传值,观察者模式,在vue中叫做总线机制

<div id=app>
    <child content='dell'></child>
    <child content='lee'></child>
  </div>



  <script>
//在vue的prototype上挂载一个bus的属性,属性指向vue实例,后面每个组件上都有bus的属性
    Vue.prototype.bus = new Vue()

    Vue.component('child', {
      data:function(){
        return {
          selfContent:this.content//单向数据流机制,赋值一个父组件值的副本
        }
      },
      props: {
        content: String
      },
      template: '<div @click="handleClick">{{selfContent}}</div>',
      methods: {
        handleClick: function () {
          // alert(this.content)
          this.bus.$emit('change',this.selfContent)
        }
      },
      mounted:function(){
          var this_ = this//这里的this作用域会发生变化,所以提前存储一下
          this_.bus.$on('change',function(msg){
            this_.selfContent = msg
          })
        }
    })


    var vm = new Vue({
      el: "#app",
    })
  </script>

4.slot的用法

<div id=app>
    <child>
      <div class="header" slot="header">header</div>
      <div class="footer" slot="footer">footer</div>
    </child>
  </div>

  <script>

    Vue.component('child', {
      template: `<div>
                    <slot name="header"></slot>
                    <p>dell</p>
                    <slot name="footer"></slot>
                  </div>`
    })

    var vm = new Vue({
      el: "#app",
    })
  </script>

5.slot-scope作用域插槽

<div id=app>
    <child>
      <template slot-scope="props">
          <!-- //props接收数据,模板可以直接读取数据 -->
          <li>{{props.item}}--hellp</li>
      </template>
    </child>
  </div>

  <script>

    Vue.component('child', {
      data: function () {
        return {
          list: [1, 2, 3, 4]
        }
      },
      template: 
      `
        <div>
          <ul>
           <slot v-for="item of list" :item=item></slot>//这里循环一个数据,:item=item是给父组件传递一个数据
          </ul>
        </div>
      `
    })

    var vm = new Vue({
      el: "#app",
    })
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 讲故事前先讲代码 父组件向子组件传值 父组件数据传递给子组件可以通过props属性来实现父组件: 子组件: 父向子...
    李佳明先生阅读 1,170评论 2 13
  • 最近在使用ionic开发app时(基于Angular4),做到了购物车功能,涉及到每个门店下都有各自的订单,然后每...
    已不淘气很多年阅读 6,837评论 2 4
  • 前言 您将在本文当中了解到,往网页中添加数据,从传统的dom操作过渡到数据层操作,实现同一个目标,两种不同的方式....
    itclanCoder阅读 25,973评论 1 12
  • 1. 父组件向子组件传值 创建一个两个组件,一个父组件,一个子组件,父组件定义如下: 子组件定义如下 2. 子组件...
    Ishmael丶Yoko阅读 255评论 0 1
  • 我现在的某个舍友也是我的校友,我们也才刚刚认识不到一个月,可是为数不多的朝夕相处让我们变成了关系非常好的朋友,这几...
    程么么阅读 434评论 5 2