Vue 父组件向子组件传递对象

传递参数:v-bind:author="author",父组件 blog-post 将对象 author 以传递对象的方式传入子组件

<body>
<div id="app">
    <blog-post v-bind:author="author"></blog-post>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  Vue.component('blog-post', {
    props: ['author'],
    template: '
{{author.name}}--{{author.age}}--{{author.male}}
'
}) const vm = new Vue({ el: '#app', data: { author: { name: 'Jerry', age: 18, male: 'male' } } }) </script> </body>

输出结果:
Vue 父组件向子组件传递对象_第1张图片
传递属性:v-bind="author",父组件 blog-post 将对象 author 以传递属性的方式传入子组件

<body>
<div id="app">
    <blog-post v-bind="author"></blog-post>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  Vue.component('blog-post', {
    props: [],
    template: '
'
}) const vm = new Vue({ el: '#app', data: { author: { name: 'Jerry', age: 18, male: 'male' } } }) </script> </body>

输出结果:
Vue 父组件向子组件传递对象_第2张图片
在子组件中接收父组件的 name、age、male 属性

<body>
<div id="app">
    <blog-post v-bind="author"></blog-post>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  Vue.component('blog-post', {
    props: ['name', 'age', 'male'],
    template: '
{{name}}--{{age}}--{{male}}
'
}) const vm = new Vue({ el: '#app', data: { author: { name: 'Jerry', age: 18, male: 'male' } } }) </script> </body>

Vue 父组件向子组件传递对象_第3张图片
结论:

  • 父组件向组件件中传递对象,可以采用绑定属性的方式,简化传递参数的过程。

你可能感兴趣的:(Vue 父组件向子组件传递对象)