vue基础之父传子的理解

最新推荐文章于 2024-05-30 15:26:53 发布

weixin_40551017

最新推荐文章于 2024-05-30 15:26:53 发布

阅读量205

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_40551017/article/details/107194805

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 子组件绑定props中自定义的属性名，右边等于父组件的list属性 -->
        <!-- 这个意思就很好理解了，就是将父组件的属性映射到子组件来，成为子组件的一个属性 -->
        <child :clist="list"></child>
    </div>
    <!-- 这是子组件的模板，我们独立出来写，清晰一些 -->
    <template id="ctpm">
        <div>
            <ul>
                <li v-for="item in clist">{{item}}</li>
            </ul>
        </div>
    </template>
    <script>
        //声明一个全局的子组件child，它的模板是ctpm，它通过props接收父组件传来的数据
        Vue.component('child', {
            template: '#ctpm',
            props: ['clist'], //父组件向子组件传值，通过props传进来，props可以是数组，对象
            // props: {
            //     clist: Array
            //     requierd:true
            // }, 对象的形式，右边指定数据类型,requierd:true可不写，写了意思手机这个数据是必须要传的
            data() {
                return {

                }
            }
        });
        //父组件，里面有个list属性，是一个数组
        const app = new Vue({
            el: '#app',
            data: {
                list: ['张三', '李四', '王五'],
                // list2: ['赵六', '孙二麻子', '小傻瓜']
            },
            components: {

            }
        })
    </script>
</body>

</html>

weixin_40551017

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础之父传子的理解

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="vue/vue.js"></scr
复制链接

扫一扫

专栏目录