vue之组件（组件之间相互传参）

1.全局注册组件

Vue.component('button-cart',{
 data () {
  return {
    count: 1
  }
  },
  template: '<button @click="count++">{{ count }}</button>'
})
new Vue({el: '#app'})

　　组件中的data必须是一个函数

2. 局部注册组件

    // 局部组件
    const Buttoncart = {
      template: '<button>局部的组件<button>'
    }
    new Vue({
      el: '#app',
      components: {
        Buttoncart
      }
    })

 // 另一种写法  推荐
 <template id="cart">
    <div>呵呵哒
      <ul>
        <li>小王</li>
        <li>小丽</li>
      </ul>
    </div>
  </template>
    const Buttoncart = {
      template: '#cart'
    }
    new Vue({
      el: '#app',
      components: {
        Buttoncart
      }
    })

组件之间相互传值

3.父组件给子组件传值

　　父组件在调用子组件的地方，给它添加一个自定义属性，这个自定义属性的值就是父组件需要传递给子组件的值，如果这个值是一个变量的话需要用到绑定属性，，，，在子组件的内部添加一个props,这个props就是用来描述接收父组件的值

　　props有三种写法

　　1.数组的方法 props[data,flag] 数组元素就是自定义属性名

　　2.对象方法 props:{ data: Array } key值为自定义的属性名，value值为数据类型

　　3.也是对象方法 props: { data: { type: Array, defualt: () { return [] } } }

　　　　key值为自定义的属性名，value值为一个对象，在此对象下，第一个key为type,value值为数据类型，第二个key值为 default，value值为默认值，如果默认的数据是数组或者对象，需要使用函数，返回默认值

<div id="app">
    <Buttoncsrt></Buttoncsrt>
  </div>
  <script>
    const nav = {
      // 子组件
      props: {
        data: {
          type: Array,
          defualt: () => {
            // 如果是一个数组或者对象需要使用函数返回
            return []
          }
        }
      },
      template: '<div><P v-for="(item, index) of data" :key="index">{{ item }}</P></div>'
    }
    const Buttoncsrt = {
      // 父组件
      data () {
        return {
          list: [1,6,8,9]
        }
      },
      // 父组件调用子组件的地方
      template: '<my-body :data="list"></my-body>',
      components:{
        'my-body': nav
      }
    }
    new Vue({
      el: '#app',
      components: {
        Buttoncsrt
      }
    })

4.子组件给父组件传值

　　在父组件调用子组件的地方，绑定自定义事件名的事件，此事件由父组件实现，注意绑定事件不加(),方法实现有默认参数,此参数的值就是子组件传递过来的值

<div id="app">
        <my-body></my-body>
    </div>
    <template id="nav">
        <div>
            则
            <button @click="senddata('111')">改变为111</button>
            <button @click="senddata('222')">改变为222</button>
            <button @click="senddata('333')">改变为333</button>
            <button @click="senddata('444')">改变为444</button>
        </div>
    </template>
    <template id="comp">
        <div>
            呵呵 {{ nun }}
            <!-- 啥也不写设置了默认值的话显示默认值 -->
            <my-nav @my-eve='getdata'></my-nav>
        </div>  
    </template> 
    <script>    
    // 在子组件中，通过某一个事件触发，执行以下事件
  // this.$emit(自定义事件名, 传递的参数)
  // 在父组件调用子组件的地方，绑定 自定义事件名 的事件，此事件由 父组件实现，注意绑定事件不加(),方法实现有默认参数,此参数的值就是子组件传递过来的值
        var nav = { //子组件
            template: '#nav',
            methods: {
                senddata(val){
                    this.$emit('my-eve' , val)
                }
            }
        }
        var coent = {//父组件
            template: '#comp',
            data(){
                return {
                    list: [2,6,89,74,23],
                    nun : '111'
                }
            },
            components: {
                'my-nav': nav
            },
            methods: {
                getdata(val){
                    this.nun = val
                }
            }
        }
        var app = new Vue({
            el: '#app',
            components: {
                'my-body': coent
            }
        })
    </script>

5.非父子之间传值

vue之组件（组件之间相互传参）

猜你喜欢