Vue组件父传子

最新推荐文章于 2023-07-22 11:54:17 发布

Kikyo--

最新推荐文章于 2023-07-22 11:54:17 发布

阅读量508

点赞数

本文链接：https://blog.csdn.net/weixin_55803498/article/details/116240375

版权

在Vue中将父组件数据传递给子组件

<body>
    <div id="app">
        <cpn :cmovies="movies" :cmessage="message"></cpn>
    </div>
</body>
<template id="cpn">
    <div>
        <ul>
            <li v-for="item in cmovies">{{item}}</li>
        </ul>
        <h2>{{cmessage}}</h2>
    </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: "hello",
            movies: ["海王", "海贼王", "海绵宝宝"]
        },
        components: {
            'cpn': {
                template: "#cpn",
                props: ['cmovies', 'cmessage']
            }
        }
    })
</script>

</html>

Vue中父传子主要是通过props在子组件中建立变量，而后通过v-bind属性将父组件中变量的值的数据传递给子组件中通过props建立的变量，而后在子组件中使用相应的变量即可。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Kikyo--

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件父传子

在Vue中将父组件数据传递给子组件<body> <div id="app"> <cpn :cmovies="movies" :cmessage="message"></cpn> </div></body><template id="cpn"> <div> <ul> <li v-for="item in cmov
复制链接

扫一扫