vue.js中的子组件与父组件，prop传递数据

来源：互联网发布：淘宝清退是什么意思编辑：程序博客网时间：2024/06/05 04:10

组件实例的作用域是孤立的。不能在子组件的模板内直接引用父组件的数据。需要通过子组件的 props 选项显式声明子组件的数据：
子组件与父组件的关系：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Prop</title>    <script src="vue.js"></script></head><body><!--div为父组件，child为子组件--><div id="app">    {{message}}    <child message="hi!"></child>    <!--此处若不声明message，不会继承父组件的属性值。--></div><script>    //先声明组件，才能使用组件。    Vue.component('child', {//        声明props（数组），引用父组件的message。（只是引用该属性，并没有引用属性值）        props: ['message'],        template: '<span>{{ message }}</span>'    });    new Vue({        el: '#app',        data: {            message: "hello"        }    });</script></body></html>

以上是自己的理解，仅供参考，若有错误与不足，欢迎指正

阅读全文

0 0