vue组件传值（附开源地址）

自己做的vue的项目，打算开源发布出去。里面会不断的有新的文章，帮助大家走过各种坑，当然该项目还没完成，我个人也会尽快做。我会借着每次发布新文章时都推广一下。如果看到的，或是有兴趣的人可以给个star。真的非常感谢啦。
地址：
VUE项目

重点： 觉得还可地，顺便给颗星，谢谢

一、组件传值

1、父组件给子组件传值

1.0 应用场景：父组件内有搜索功能，子组件是搜索之后的列表。需要将列表内的关键之加红色，但是关键之的值在父组件捏。

1.1 命名约定：对于props声明的属性来说，在父级HTML模板中，属性名需要使用中划线写法（如下的childMessage 变为child-message）

1.2 props 是单向绑定的：
当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解另外，每次父组件更新时，子组件的所有 prop都会更新为最新值。这意味着不应该在子组件内部改变 prop。如果这么做了，Vue 会在控制台给出警告

1.3 注意确保在初始化根实例之前注册组件。
1.4 如果用vue-cli父组件通过import引用子组件，在子组件内用props即可。

1.5 传值数据类型：

普通类型：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null）

普通类型是可以在子组件中更改，不会影响其他兄弟子组件内同样调用的来自父组件的值

引用类型：数组（Array）、对象（Object）

引用类型的值，当在子组件中修改后，父组件的也会修改，其他同样引用了改值的子组件内部的值也会跟着被修改。

vue-cli 写法：

父组件：

<template>
    <div>父：
        <child :child-msg="parentMsg"></child>
    </div>
</template>
<script>
import child from './child.vue'
export default {
  data () {
    return {
      parentMsg: 0
    }
  },
  components: {
    child
  }
}
</script>

子组件child.vue

export default {
  props: {
    childMsg: Number  // 验证为数值，需要props是对象写法
  },
  data () {
    return {

    }
  },
  mounted () {
    console.log(this.childMsg)
  }
}

引入vue.js写法一

<div id="app">
  <parent></parent>
</div>

// 父组件
Vue.component('parent', {
  data () {
    return {
      parentMsg: '3333'
    }
  },
  // 双向绑定input，动态的将父组件的数据传递给子组件
  template: `<div>父：
               <input v-model="parentMsg">
               <child :child-message="parentMsg"></child>
               <div>{{parentMsg}}</div>
            </div>`
});

// 子组件
Vue.component('child', {
  props: ['childMessage'],
  template: '<div><div>{{ childMessage }}</div> 子：<input v-model="childMessage"></div>'
})

// 初始化实例
new Vue({
  el: '#app'
})

引入vue.js写法二

<div id="app">
  <parent></parent>
</div>

// 子组件
var child = {
  props: ['childMessage'],
  template: '<div><div>{{ childMessage }}</div> 子：<input v-model="childMessage"></div>'
}

// 父组件
var parent = {
  data () {
    return {
      parentMsg: '33ssss33'
    }
  },
  template: `<div>父：
               <input v-model="parentMsg">
               <child :child-message="parentMsg"></child>
               <div>{{parentMsg}}</div>
            </div>`,
  components: {
    'child': child
  }
};
// 创建根实例
new Vue({
  el: '#app',
    components: {
    'parent': parent
  }
})

2、子组件给父组件传值

利用：vm.$emit( event, […args] ) ：触发当前实例上的事件。附加参数都会传给监听器回调。

父组件：

<template>
  <div id="app">
    <pages @sendDataToParent="showChildData"></pages>
  </div>
</template>

<script>
import pages from './page/page1.vue'
export default {
  name: 'App',
  data () {
    return {
      parentMsg: 0
    }
  },
  components: {
    pages
  },
  methods: {
    showChildData (arg) {
    // 通过argments访问子组件穿过来的值
      console.log(arg)
    }
  }
}
</script>

子组件：

<template>
  <div>
    <div @click="sendDataToParent()">3333</div>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  methods: {
    sendDataToParent () {
    // emit的第二个参数会传给回调
      this.$emit('sendDataToParent', {a: 1})
    }
  }
}
</script>

3、兄弟组件传值（传给父组件，再由父传给子，上面两种结合起来用）

数据流向： page1.vue —— parent.vue —— page2.vue

父组件：

<template>
  <div id="app">
    <pages ref="child" @sendDataToParent="showChildData" :child-msg="parentMsg"></pages>
    <pages2 ref="child" :child-msg-from-child="comeChild1"></pages2>
  </div>
</template>

<script>
import pages from './page/page1.vue'
import pages2 from './page/page2.vue'
export default {
  data () {
    return {
      parentMsg: '点击page1将数据传递给page2,该段文字又是通过父组件传递给子组件page1的。',
      comeChild1: {}
    }
  },
  components: {
    pages,
    pages2
  },
  methods: {
    showChildData (arg) {
      this.comeChild1 = arg
    }
  }
}
</script>

子组件page1：

<template>
  <div>
    <div>page1</div>
    <div @click="sendDataToParent()">page1数据：{{childMsg}}</div>
  </div>
</template>

<script>
export default {
  props: {
  // 验证父组件穿过来的内容 即：（点击page1将数据传递给page2,该段文字又是通过父组件传递给子组件page1的。）
    childMsg: String
  },
  data () {
    return {

    }
  },
  methods: {
    sendDataToParent () {
      // emit的参数会传给回调，传递到父组件
      this.$emit('sendDataToParent', {a: 1})
    }
  }
}
</script>

子组件page2：

<template>
  <div>
    <div>page2</div>
    <div>page2数据：{{childMsgFromChild}}</div>
  </div>
</template>

<script>
export default {
  props: {
    // 接受子组件1传递给父组件，然后在传递到这里的数据 即： （{a: 1}）
    childMsgFromChild: Object
  },
  data () {
    return {

    }
  },
  methods: {

  }
}
</script>

二、验证：

验证:

1、props不能是数组或字符串。

2、可以是原生类型String、Number、Boolean、Function、Object、Array、Symbol或自定义。使用 instanceof 检测。

<div id="app">
  <parent></parent>
</div>

var child = {
  props: {
    'childMessage': String
  },
  template: `<div>
               <div>{{ childMessage }}</div>
               子：<input v-model="childMessage">
            </div>`
}
var parent = {
  data () {
    return {
      // 如果该处不是字符串，会提示错误。
      parentMsg: 'rf'
    }
  },
  template: `<div>父：
               <input v-model="parentMsg">
               <child :child-message="parentMsg"></child>
               <div>{{parentMsg}}</div>
            </div>`,
  components: {
    'child': child
  }
};
// 创建根实例
new Vue({
  el: '#app',
    components: {
    'parent': parent
  }
})

三、修改props

修改prop中的数据，通常有以下两种原因

1、prop 作为初始值传入后，子组件想把它当作局部数据来用

2、prop 作为初始值传入，由子组件处理成其它数据输出

**注意:**JS中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态

下面示例中，除初始值外，父组件的值无法更新到子组件中

<div id="app">
  <parent></parent>
</div>


var child = {
  props: [
  'childMessage'
  ],
  data () {
    return {
      childSelf: this.childMessage
    }
  },
  template: `<div>
               子：<input v-model="childSelf">
               <div>{{ childSelf }}</div>
            </div>`
}

var parent = {
  data () {
    return {
      parentMsg: 'rf'
    }
  },
  template: `<div>父：
               <input v-model="parentMsg">
               <div>{{parentMsg}}</div>
               <child :child-message="parentMsg"></child>
            </div>`,
  components: {
    'child': child
  }
};
// 创建根实例
new Vue({
  el: '#app',
    components: {
    'parent': parent
  }
})

四、父子组件错误用法

错误1：

<div id="app">
  <parent>
    <child></child>
    <child></child>
  </parent>
</div>

错误2：

<div id="app">
  <parent></parent>
  <child></child>
</div>