前端 Vue框架学习实例（十）

最新推荐文章于 2022-11-25 18:52:46 发布

自足的猿

最新推荐文章于 2022-11-25 18:52:46 发布

阅读量161

点赞数

分类专栏： Vue学习文章标签： vue js

本文链接：https://blog.csdn.net/zhshuzi/article/details/119191423

版权

Vue学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了Vue组件的使用，包括组件如何访问自身的Vue实例数据，强调了data必须为函数以确保组件实例间的独立性。此外，展示了如何实现一个计数器组件，并演示了通过props进行父子组件通信的方法，包括props的多种写法和命名规则。最后，讨论了在DOM模板中camelCase与kebab-case命名规范的对应关系。

摘要由CSDN通过智能技术生成

1.组件可以访问Vue实例的数据吗？

组件是一个单独功能的模块的封装，有属于自己的HTML模板，也有属于自己的data

Vue.component('cpn', {

            template: '#cpn', //分离写法

            data() { //data是一个函数

                return {

                    title: 'abc'

                }

            }

        })

2.组件数据的存放

组件对象也有一个data属性（也有methods等属性）
data必须是一个函数
data函数返回一个对象，对象内部保存着数据

为什么data是返回一个函数？

这样可以使每个实例相互独立，不会相互影响（作用域相关）

实现一个将计数器封装为组件

<body>
    <div id="app">
        <!-- 组件实例对象 -->
        <cpn></cpn>
        <cpn></cpn>
        <cpn></cpn>
    </div>

    <!-- 组件模板 -->
    <template id="cpn">
        <div>
            <h2>当前计数：{{count}}</h2>
            <button @click="increment">+</button>
            <button @click="decrement">-</button>
        </div>
    </template>

    <script>
        //注册组件(全局)
        Vue.component('cpn', {
            template: '#cpn',
            data() {
                return {
                    count: 0
                }
            },
            methods: {
                increment() {
                    this.count++
                },
                decrement() {
                    this.count--
                }
            }
        })
        const app = new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>

3.父子组件之间的通信

通过props（properties）向子组件传递数据
通过事件向父组件发送消息

父组件向子组件传递数据 props，它的值有两种方式

字符串数组，数组中的字符串就是传递时的名称。

对象，对象可以设置传递时的类型，也可以设置默认值。

<body>
    <div id="app">
        <!-- 使用v-bind -->
        <cpn :cmovies="movies" :cmessage="message"></cpn>
    </div>
    <template id="cpn">
        <div>
            <ul>
                <li v-for= "item in cmovies">{{item}}</li>
            </ul>
            <h2>{{cmessage}}</h2>
        </div>
    </template>

    <script>
        //子组件
        const cpn = {
                template: '#cpn',
                props: ['cmovies', 'cmessage'], //使用props传递数据
                data() {
                    return {}
                },
                methods: {

                }
            }
            //父组件
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好哇',
                movies: ['海贼王', '海王', '海尔兄弟']
            },
            components: {
                cpn
            }
        })
    </script>
</body>

poops有多种写法，如：

 props: {
                    //1.类型限制
                    cmovies: Array,
                    cmessage: String,
                    //2.提供一些没默认值
                    cmessage:{
                        type:Stirng,
                        default:'aaaaaaaaa',
                        reuqired:true       //表示必须传
                    },
                     //3.类型是对象或者数组时，默认值必须是一个函数
                    cmovies:{
                        type:Array,
                        default(){
                            return []
                        }
                    }
                    //4.自定义类型
                },

4.父子组件通信---props驼峰标识

使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名

自足的猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端 Vue框架学习实例（十）

1.组件可以访问Vue实例的数据吗？组件是一个单独功能的模块的封装，有属于自己的HTML模板，也有属于自己的dataVue.component('cpn',{template:'#cpn',//分离写法data(){ //data是一个函数return{title:'abc'}}...
复制链接

扫一扫