父组件给子组件传值props

最新推荐文章于 2022-07-11 09:48:44 发布

深海***记忆

最新推荐文章于 2022-07-11 09:48:44 发布

阅读量156

点赞数

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/amyzhou11/article/details/106229606

版权

vue.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

父组件给子组件传值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>{{movies}}</p>
//使用v-bind 绑定传值，只能在使用子组件的地方传值，不使用v-bind,
**<com1  :cmovies="movies"></com1>**他会将movies当做字符串
</div>
<template id="com1">
    <div>
        <p>我是组件一</p>
/*子组件中直接使用*/
        <h2>
            {{cmovies}}
        </h2>
    </div>
</template>
const vue = new Vue({
    el:'#app',
    data:{
        movies:['嘻嘻','哈哈','呵呵'],
    },
    components:{
        com1:{
            template:'#com1',
            props:['cmovies']
        },
    }
})
</html>

在子组件中使用props 接收数据接收的时候可以是数组类型也可以是对象类型，
props:{
‘自定义接收名’：Number/String/Array/Object
}