·通过子组件的 props选项接收父组件的传值。

    props属性使用 - 图1

    ·注意: props不要与data存在同名属性

    ·父组件设置方式如下:

    props属性使用 - 图2

    <!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>Document</title> </head> <body> <div id=“app”> <my-component-a title=“这是静态的标题” content=“这是静态的内容” ></my-component-a> <my-component-a v-bind:title=“‘这是静态的标题，这是演示’” :content=“‘这是静态内容’” ></my-component-a> <my-component-a :title=“item.title” :content=“item.content” ></my-component-a> </div> <script src=“lib/vue.js”></script> <script> // 创建子组件 Vue.component(‘my-component-a’, { props: [‘title’, ‘content’], template: `

    {{ title }}

    {{ content }}
    ` }); new Vue({ el: ‘#app’, data: { item: { title: ‘这是示例标题’, content: ‘这是示例内容’ } } }); </script> </body> </html>