props:['myValue']接受父级的数据

最新推荐文章于 2022-11-02 17:55:38 发布

dongsdh

最新推荐文章于 2022-11-02 17:55:38 发布

阅读量473

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/dongsdh/article/details/79867448

版权

Vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<child-component :myValue="gift"></child-component>
<child-component myValue="money"></child-component>

:myValue="gift"数据绑定和myValue="money"数据绑定是有区别的

区别在于有没有签名那个冒号，有冒号就是绑定关系

gift指向data里的return返回值gift值为传家宝，myValue="money"就在指向money

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title></title>
</head>
<body>

<div id="container">
    <parent-component></parent-component>
</div>

<script>

    // 一切都是组件
    Vue.component('parent-component',{
        data: function () {
            return {
                gift:'金牌'
            }
        },
        template:`
        <div>
            <h1>这是父组件</h1>
            <hr/>
            <child-component :myValue="gift"></child-component>
            <child-component myValue="money"></child-component>
        </div>
        `
    })
    Vue.component('child-component',{
        props:['myValue'],
        template:`
        <div>
            <h1>这是子组件</h1>
            <p>{{"父级的数据："+myValue}}</p>
        </div>
        `
    })


    new Vue({
        el: '#container',
        data: {
            msg: 'Hello Vue'
        }
    })
</script>

</body>
</html>