vue.js 组件传值：属性传值可以从父组件到子组件，也可以从子组件到父组件。
父组件到子组件的传值
demo里有APP.vue是父组件，Header.vue，Users.vue和Footer.vue为子组件，Users.vue中的数据有个数组，现在把数组放到父组件App.vue中
App.vue文件：
1 <template> 2 ??<div id="app"> 3 ????<app-header></app-header> 4 ?? ?<users v-bind:users="users"></users> 5 ????<app-footer></app-footer> 6 ??</div> 7 </template> 8 <!--行为--> 9 <script>10 ??//局部注册组件11 ??import Users from ‘./components/Users‘12 ??import Header from ‘./components/Header‘13 ??import Footer from ‘./components/Footer‘14 15 export default {16 ??name: ‘App‘,17 ??data(){18 ????return {19 ????? users:[20 ????????{name:"Henry",Position:"Java工程师",show:false},21 ????????{name:"Lily",Position:"Java工程师",show:false},22 ????????{name:"Kang",Position:"Java工程师",show:false},23 ????????{name:"Henry",Position:"Java工程师",show:false},24 ????????{name:"Henry",Position:"Java工程师",show:false}25 ??????]26 ????}27 ??},28 ??components:{29 ????"users":Users,30 ????"app-header":Header,31 ????"app-footer":Footer32 ??}33 }34 </script>35 36 <!--样式-->37 <style >38 39 ??h1{40 ????color: pink;41 ??}42 </style>这里通过与子组件关联的 <users></users> 标签传值，在标签里通过 V-bind：users=“users” 来实现，前面的users是我们起的别名，后面的“users”为data（）返回值里面的users数组.
然后在子组件里接收数据，接收数据这里有两种方法。
第一种：
在子组件Users.vue中的script里，直接通过 props：[“users”] 来获取数组，这样就可以在子组件里直接使用users数组，但是这种方法不够严谨。
1 <script>2 ??export default {3 ????name: ‘users‘,4 ????props:[‘users‘]5 ??}6 </script>第二种：
在子组件Users.vue中的script里，通过通过 props：{...} 来获取
1 <script> 2 ??export default { 3 ????name: ‘users‘, 4 ????props:{ 5 ??????users:{ 6 ????????type:Array, 7 ????????required:true 8 ??????} 9 ????}10 ??}11 </script>在props中，可以接收多个对象，而且可以指定对象的类型，而且可以说明是不是规格的数据。
属性传值的时候可以传两种东西，一个是传具体的值，另一个是传引用，这里的引用一般只有两个东西，一个是数组，一个是对象
注意：注意传值和传引用的区别
传值： string number boolean
传引用： array object
传值和传引用会带来不同的效果，选择哪一种要根据项目的具体需求而定。
例如上面的例子，传的就是一个数组，是传引用，既然是传引用，就会出现一些问题，例如在项目中多次引用数据，如果添加或者删除一个地方的数据，其他地方的数据也会出现变化，
但是传值的话，修改一个地方其他地方并不会改变
子组件向父组件传值
1.通过事件传值
首先在子组件中注册一个事件，通过 this.$emit("titleChanged","子向父组件传值"); 第一个参数是当前注册事件的名字是什么，自己定义的一个事件，第二个参数是该事件要传的内容。
例如：
Header.vue文件：
1 <template> 2 ??<header @click="changeTitle"> 3 ????<h1>{{title}}</h1> 4 ??</header> 5 </template> 6 ?7 <script> 8 ??export default { 9 ????name: ‘app-header‘,10 ????data () {11 ??????return {12 ????????title1:"Vue.js Demo"13 ??????}14 ????},15 ????props:{16 ??????title:{17 ????????type:String18 ??????}19 ????},20 ????methods:{21 ??????changeTitle:function(){22 ????????this.$emit("titleChanged","子向父组件传值");23 ??????}24 ????}25 ??}26 </script>27 28 <style scoped>29 header{30 ??background: pink;31 ??padding: 10px;32 }33 h1{34 ??color: #222;35 ??text-align: center;36 ??}37 </style>当在header上点击，就出触发changeTitle方法，然后这个changeTitle方法会在父组件App.vue中寻找titleChanged事件，然后在父组件中实现titleChanged事件。
App.vue文件：
1 <!--模板--> 2 <template> 3 ??<div id="app"> 4 ????<app-header @titleChanged="updateTitle($event)" ?:title="title"></app-header> 5 ????<users :users="users"></users> 6 ????<app-footer></app-footer> 7 ??</div> 8 </template> 9 10 <!--行为-->11 <script>12 ??//局部注册组件13 ??import Users from ‘./components/Users‘14 ??import Header from ‘./components/Header‘15 ??import Footer from ‘./components/Footer‘16 17 export default {18 ??name: ‘App‘,19 ??data(){20 ????return {21 ??????title:"这是一个title！"22 ????}23 ??},24 ??methods:{25 ????updateTitle:function (title) {26 ??????this.title = title;27 ????}28 ??},29 ??components:{30 ????"users":Users,31 ????"app-header":Header,32 ????"app-footer":Footer33 ??}34 35 }36 </script>37 38 <!--样式-->39 <style >40 41 ??h1{42 ????color: pink;43 ??}44 </style>在App.vue组件中与子组件关联的标签中绑定一个事件 @titleChanged="updateTitle($event)" ，事件名字就是子组件注册的事件名字，然后这个事件再实现一个方法 updateTitle($event) ，
接收参数用 $event ，接下来在App.vue组件中实现 updateTitle() 方法，这里的 this.title=title 中的this.title是当前页面的title，后面的title是形参，是子组件传递过来的参数。
这样运行程序后，在header上点击以后就替换成了从子组件中传过来的值，OK现在来分析一下工作流程：
当我们点击header标签的时候，会触发Header.vue组件中的changeTitle方法，触发这个方法以后，方法里注册了一个事件titleChanged，并且该事件传递了一个参数，然后会在父组件App.vue中寻找titleChanged事件，然后App.vue中的这个事件实现了updateTitle方法，然后该方法用子组件传递过来的值替换了当前组件的title的值。
这样就简单的实现了通过事件的方法从子组件向父组件传值。
文章来自：https://www.cnblogs.com/jin-zhe/p/8317532.html
vue.js 组件传值
原文地址：https://www.cnblogs.com/gshao/p/9372765.html