Vue中通过 Prop 向子组件传递数据

Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute
的时候,它就变成了那个组件实例的一个 property。为了给博文组件传递一个标题,我们可以用一个props选项将其包含在该组件可接受的
prop 列表中:

Vue.component('blog-post', {   props: ['title'],   template: '

{{ title }}

'
})

一个组件默认可以拥有任意数量的 prop,任何值都可以传递给任何
prop。在上述模板中,你会发现我们能够在组件实例中访问这个值,就像访问data中的值一样。

下面是具体实现的代码:

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>父子组件之间的传值</title>
 <script src="../base/vue2.6.10.js"></script>
 </head>
 <body>
 <div id="app">
 <btn me="user"></btn>
 </div>
 </body>
 <script>
        Vue.component("btn", {
 template: `
            
            `,
 props: ["me"],
 data: function () {
 return {
 myse: "you",
 };
 },
 methods: {
 btn_click: function () {
 alert(this.me);
 console.log(this);
 },
 },
 });
 var vm = new Vue({
 el: "#app",
 data: {},
 });
 </scrip>
 </html>

你可能感兴趣的:(组件)