通过Prop向子组件传递数据

第一步父组件App.vue中

<template>
  <div id="app">
        <Users :users="users"></Users>
  </div>
</template>
<script>
import Users from './components/Users'
export default {
  name: 'App',
  data: function () {
    return {
      users: [
        {id:1, name:'Henry'},
        {id:2, name:'Tom'}
      ]
    }
  },
  components: {
    Users
  }
}
</script>

解释：把父组件中的data中的users：[ ] 通过v-bind:users = "users"传递给子组件

子组件中

<template>
    <div id="app">
        <span>通过import注册局部组件</span><br>
        <span>{{users[0].name}}</span>
    </div>
</template>
<script>
export default {
    name: 'users',
    //props:['users'],
    props: {
        users: {
            type: Array,
            required: true
        }
    }
}
</script>

解释：父组件中传过来的值可以直接使用了<span>{{users[0].name}}</span>

Prop类型

以字符串数组形式列出的 prop：

 

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型：

 

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object
}

推荐使用第二种

传递动态或静态prop

给 prop 传入一个静态的值：

 

    <blog-post title="My journey with Vue"></blog-post>

prop 可以通过 v-bind 动态赋值，例如：

 

<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post>
<!-- 动态赋予一个复杂表达式的值 -->
<blog-post v-bind:title="post.title + ' by ' + post.author.name"></blog-post>

任何类型的值都可以传给一个 prop

单向数据流

父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
这里有两种常见的试图改变一个 prop 的情形：

这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值

 

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：

 

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

 

this.$emit  (子to父)

子组件

<template>
    <button @click="showData(items)">
		获取数据
    </button>
</template>
<script>
    export default {
        name: 'tests',
        data() {
            return {
                items:
                    {
                        'key':'content',
                        'label':'内容'
                    }
            };
        },
        methods:{
            showData: function(data) {
		this.$emit('msg',data)
            }
        }
    }
</script>

父组件

 

<template>
    <view>
        <tests @msg="getData"></tests>
    </view>
</template>
<script>
// 引入 IM 组件
import tests from '../../components/test.vue';
export default {
    data() {
        return {
            datas:{},
        };
    },
    methods: {
        getData: function(data) {
            console.log(data);
            this.datas=data;
			/* 获得items:
			    {
			        'key':'content',
			        'label':'内容'
			    } */
        }
    },
    components:{
        tests
    }
};
</script>

<style></style>

 

this.$refs 父调用子组件方法

子组件

<template>
    <view>
    </view>
</template>
<script>
    export default {
        name: 'tests',
        data() {
            return {
                items:[
                    {
                        'key':'content',
                        'label':'内容'
                    }
                ]
            };
        },
        methods:{
            showData: function() {
                console.log(this.items);
            }
        }
    }
</script>

<style>
</style>

父组件

<template>
    <view>
        <tests ref="test"> </tests> 
//调用子组件的重点ref="test
		<button @click="getData">获取数据</button>
    </view>
</template>

<script>
import tests from '../../components/test.vue';
export default {
    data() {
        return {
            datas:'',
        };
    },
    methods: {
        getData: function() {
            this.$refs.test.showData();
//调用子组件的重点$refs.test

        }
    },
    components:{
        tests
    }
};
</script>