通过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>