vue中单向数据流小结

最新推荐文章于 2024-05-30 17:18:04 发布

Ying_42180591

最新推荐文章于 2024-05-30 17:18:04 发布

阅读量389

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_42180591/article/details/112233919

版权

......
<body>
    <div id='root'></div>
    <script>
        /* 
          父组件向子组件传多个参数时，可以将要传的参数置入params中，调用子组件时直接绑定v-bind="params"
          等同于将参数一个一个展开传递形式
          例如：v-bind='params'   <=> :content ='params.content' 其余参数类似
          组件传参时，参数名建议不要使用驼峰，html不支持驼峰，会将其自动转化为小写  ，建议可以使用短横线拼接，作为单词间间隔
          子组件接收时要做一个驼峰式变量去接收
          即：属性传递时候使用content-abc命名
                 接收时候使用contentAbc命名

           单项数据流：父组件可以向子组件传递数据，但是父组件的数据，子组件无法修改 
                      即子组件可以使用父组件传递过来的数据，但绝对无权修改  
                      可以避免组件间的数据耦合，让代码维护性更好，也可以避免之后的一些潜在性bug    
         */
        const app = Vue.createApp({
            template: `
           <test v-bind='params' :content-abc='content2'/>
         `,
            data() {
                return {
                    show: 'true~~',
                    // content: 'test vue world',
                    message: [],
                    params: {
                    content: 123,
                        a: 222,
                            b: 333,
                                c: 444
                    },
                    content2:'cecc'
                }
            },
            methods: {
                handleBtnClick(num, event) {
                    console.log(event.target)
                    this.counter += 2
                }
            }
        })
        // 全局组件-测试
        app.component('test', {
            props: ['content','a','b','c','contentAbc'],
            template: '<div>{{content}}--{{a}}--{{b}}---{{c}}----aaaaaa{{contentAbc}}</div>'
        })

        /* 注意：使用组件时需要先注册完组件再将该vue实例挂载到root元素上 */
        /* vm代表的就是vue应用的根组件 
           vm获取根节点上数据，调用data时，data前加一个$,操作vm时，数据改变，视图也会自动发生改变
           如果该数据是根数据，也可以直接vm. 调用
           */
        const vm = app.mount('#root')
     //app.unmount()//让vue失效
    </script>
</body>

......

Ying_42180591

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中单向数据流小结

......<body> <div id='root'></div> <script> /* 父组件向子组件传多个参数时，可以将要传的参数置入params中，调用子组件时直接绑定v-bind="params" 等同于将参数一个一个展开传递形式例如：v-bind='params' <=> :content ='params.content' 其余参数
复制链接

扫一扫