07-Vue笔记——props父传子

最新推荐文章于 2024-10-01 20:12:28 发布

anxikang5491

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量117

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Romantic-Blood/p/11077659.html

版权

父传子知识点理解：
示例中组件用v-bing绑定了message的事件parentMessage，同时与input中的v-model动态绑定，在组件中用props接收来自父组件的message数据，传给template，最后parentMessage在外部data中定义。
有时候，传递的数据并不是直接写死的，而是来自父级的动态数据，这是可以使用指令v-bind来动态绑定props的值，当父组件的数据变化时，也会传递给子组件。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="parentMessage">
    <my-component :message="parentMessage"></my-component>
</div>
<script>
    Vue.component("my-component",{
        props:["message"],
        template:`<div>{{message}}</div>`
    });
    new Vue({
        el:"#app",
        data:{
            parentMessage:"父传子默认值"
        }
    })
</script>
</body>
</html>