打造灵活可复用的Web应用：Vue组件化开发指南！_vue web 控件

2401_85124737

于 2024-06-11 18:01:42 发布

阅读量1k

点赞数 22

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/2401_85124737/article/details/139605493

版权

1.3、组件化和模块化的区别

组件和模块的定位不同。组件一般用于前端，模块化在后台运用的比较多。例如vue中的组件，主要是为了拆分vue实例的代码量，让我们可以以不同的组件来划分不同的功能模块，将来我们需要什么样的功能，就直接调用对应的组件即可。

模块化中的模块一般指的是 Javascript 模块

组件则包含了 template、style 和 script，而它的 Script 可以由各种模块组成。也可以理解为“框架”，意思是把功能进行划分，将同一类型的代码整合在一起。组件化就相当于做一个页面，把页面中的每一个独立的功能拆分出来，可以尽情的拆分，最后组装成一个完整的页面。

组件化

主要从ui界面上进行划分。例如前端的组件化，方便ui组件的调用。类似于以前的导航栏。

模块化

主要从代码逻辑的角度进行划分，方便代码分层开发，保证每个功能模块职责单一。

二、简单的HelloWorld案例

2.1、使用组件的步骤

创建组件构造器
注册组件
使用组件

2.2、案例

<body>
    <div id="myDiv">
        <my-component></my-component>
        <my-component></my-component>
    </div>

    <script src="../js/vue.js"></script>
    <script type="text/javascript">
 // 1、创建组件构造器
 const myComponent = Vue.extend({
 template: `
 <div>
 <h1>爱学习的少年</h1>
 <p>HelloWorld</p>
 <p>HelloWorld</p>
 </div>
 `
 });

 // 2、注册组件
 Vue.component("my-component",myComponent);

 const app = new Vue({
 el: "#myDiv"
 });
 </script>
</body>

三、创建全局组件

3.1、方式一

<body>
    <div id="myDiv">
        <my-component></my-component>
        <my-component></my-component>
    </div>

    <script src="../js/vue.js"></script>
    <script type="text/javascript">
 // 1、创建组件构造器
 const myComponent = Vue.extend({
 template: ` // 模板只能有一个而且只能有一个根元素
 <div>
 <h1>爱学习的少年</h1>
 <p>HelloWorld</p>
 <p>HelloWorld</p>
 </div>
 `
 });

 // 2、注册组件【注意：如果使用的是驼峰命名，则在使用组件的时候需要使用'-'连接】
 Vue.component("myComponent",myComponent);

 const app = new Vue({
 el: "#myDiv"
 });
 </script>
</body>

3.2、方式二

<body>
    <div id="myDiv">
        <my-component></my-component>
        <my-component></my-component>
    </div>

    <script src="../js/vue.js"></script>
    <script type="text/javascript">
 // 1、直接使用Vue.component创建组件
 Vue.component("myComponent",{
 template: `
 <div>
 <h1>爱学习的少年</h1>
 <p>HelloWorld</p>
 </div>
 `
 });
 const app = new Vue({
 el: "#myDiv"
 });
 </script>
</body>

3.3、方式三

<body>
    <div id="myDiv">
        <my-component></my-component>
        <my-component></my-component>
    </div>

    <template id="myTemplate">
        <div>
            <h1>爱学习的少年</h1>
            <p>Spring</p>
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script type="text/javascript">
 // 1、引入外部一个模板片段
 Vue.component("myComponent",{
 template: "#myTemplate"
 });
 const app = new Vue({
 el: "#myDiv"
 });
 </script>
</body>

3.4、方式四

<body>
    <div id="myDiv">
        <my-component></my-component>
    </div>

    <script type="text/x-template" id="myTemplate">
 <h1>使用script实现注册组件</h1>
 </script>

    <script src="../js/vue.js"></script>
    <script type="text/javascript">

 // 注册组件
 Vue.component("myComponent",{
 template: "#myTemplate"
 });

 const app = new Vue({
 el: "#myDiv"
 });
 </script>
</body>

四、创建私有组件

4.1、方式一

<body>
    <div id="myDiv">
        <my-nav></my-nav>
        <my-nav></my-nav>
    </div>

    <script src="../js/vue.js"></script>
    <script type="text/javascript">
 const app = new Vue({
 el: "#myDiv",
 components: {
 myNav: {
 template: "<h1>这个是导航条,私有组件</h1>"
 }
 }
 });
 </script>
</body>

4.2、方式二

<body>
    <div id="myDiv">
        <my-nav></my-nav>
        <my-nav></my-nav>
    </div>

    <template id="myTemplate">
        <h1>这个是导航条,私有组件</h1>
    </template>

    <script src="../js/vue.js"></script>
    <script type="text/javascript">
 const app = new Vue({
 el: "#myDiv",
 components: {
 myNav: {
 template: "#myTemplate"
 }
 }
 });
 </script>
</body>

五、组件填充数据

5.1、说明

组件其实也是Vue的一个实例对象，也可以有自己的data，只不过此处的data的值是一个函数，并且函数必须返回一个Object对象。
data的使用方式和之前的完全一样。

5.2、案例

<body>
    <div id="myDiv">
        <my-nav></my-nav>
        <my-nav></my-nav>
    </div>

    <template id="myTemplate">
        <h1>用户名是: {{username}}</h1>
    </template>

    <script src="../js/vue.js"></script>
    <script type="text/javascript">
 Vue.component("my-nav",{
 template: "#myTemplate",
 data: function(){
 return {username: 'HelloWorld'}
 }
 });
 const app = new Vue({
 el: "#myDiv"
 });
 </script>
</body>

5.3、探讨一下为什么data值是一个函数而不是一个对象

<body>
    <div id="myDiv">
        <my-component></my-component>
        <my-component></my-component>
        <my-component></my-component>
    </div>

    <template id="myTemplate">
        <div>
            计数器： {{count}} <br/>
            <button @click="count++">+</button>
        </div>
    </template>


    <script src="../js/vue.js"></script>
    <script type="text/javascript">

 // 注册组件
 Vue.component("myComponent",{
 template: "#myTemplate",
 data: function () {
 console.log("--"); // 打印了3次
 return {count: 0}
 }
 });

 const app = new Vue({
 el: "#myDiv"
 });
 </script>
</body>

六、组件切换

6.1、方式一：使用v-if判断

<body>
    <div id="myDiv">
        <a href="" @click.prevent="login">登录</a>
        <a href="" @click.prevent="register">注册</a>

        <login v-if="isLogin"></login>
        <register v-else></register>

    </div>

    <script src="../js/vue.js"></script>
    <script type="text/javascript">
 Vue.component("login",{
 template: `
 <div>
 用户名登录: <input type="text" placeholder="用户名登录"/>
 </div>
 `
 });

 Vue.component("register",{
 template: `
 <div>
 用户名注册: <input type="text" placeholder="用户名注册"/>
 </div>
 `
 });

 const app = new Vue({
 el: "#myDiv",
 data: {
 isLogin: true
 },
 methods: {
 login(){
 this.isLogin = true;
 },
 register(){
 this.isLogin = false;
 }
 }
 });
 </script>
</body>

6.2、方式二：is实现

<body>
    <div id="myDiv">
        <a href="" @click.prevent="componentName = 'login'">登录</a>		// 记得加单引号
        <a href="" @click.prevent="componentName = 'register'">注册</a>	// 记得加单引号

        <component :is="componentName"></component>

    </div>

    <script src="../js/vue.js"></script>
    <script type="text/javascript">
 Vue.component("login",{
 template: `
 <div>
 用户名登录: <input type="text" placeholder="用户名登录"/>
 </div>
 `
 });

 Vue.component("register",{
 template: `
 <div>
 用户名注册: <input type="text" placeholder="用户名注册"/>
 </div>
 `
 });

 const app = new Vue({
 el: "#myDiv",
 data: {
 componentName: "login"
 }
 });
 </script>
</body>

七、父子组件

7.1、初步认识父子组件的定义

<body>
    <div id="myDiv">
        <father></father>
    </div>

    <script src="../js/vue.js"></script>
    <script type="text/javascript">

 // 1、定义子组件
 const children = Vue.extend({
 template: `
 <h1>这个子组件</h1>
 ` 
 });

 // 2、定义父组件
 const father = Vue.extend({
 template: `
 <div>
 <h2>这个是父组件</h2>
 <children></children>
 </div>
 `,
 components: {
 children
 }
 });

 const app = new Vue({
 el: "#myDiv",
 components: {
 father
 }
 });
 </script>
</body>

7.2、父组件向子组件传递数据

7.2.0、问题案例

<body>
    <div id="myDiv">
        <my-component></my-component>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
 const app = new Vue({
 el: "#myDiv",
 data: {
 username: "HelloWorld"
 },
 components: {
 myComponent: {
 template: '<h1>姓名是: {{username}}</h1>' // 会报错
 }
 }
 });
 </script>
</body>
// 按道理来说，子作用域应该可以访问父级别作用域的，但是发现并不行。

解决思路可以这样：在父组件中，可以在使用子组件的时候，通过属性绑定的方式，把需要传递给子组件的数据以属性绑定的形式传递到子组件内部，这样的话，子组件内部就可以接收到了。

方式：通过props向子组件传递数据

7.2.1、形式一

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

说明：让Vue的实例作为父组件，之后再定义一个子组件

<body>
    <div id="myDiv">
        <my-component v-bind:subusername="username"></my-component>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el: "#myDiv",
            data: {
                username: "HelloWorld"
            },
            components: {
                myComponent: {
                    props: ['subusername'],
                    template: '<h1>姓名是: {{subusername}}</h1>'
                }
            }
        });
    </script>
</body>

<body>
    <div id="myDiv">
        <my-component v-bind:subaddresses="fatherAddresses"></my-component>
    </div>

    <template id="myTemplate">
        <div>
            <p v-for="item in subaddresses">
                {{item}}
            </p>
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script type="text/javascript">

 // 注册组件
 Vue.component("myComponent",{
 template: "#myTemplate",
 props: ["subaddresses"]
 });

 const app = new Vue({
 el: "#myDiv",
 data: {
 fatherAddresses: [
 '河南林州',
 "陕西西安",
 "浙江杭州"
 ]
 }
 });
 </script>
</body>

父组件要向子组件传递数据，总结如下：

第一步：

在父组件去应用子组件的时候，去动态的绑定一个属性。

<my-component v-bind:subusername="username"></my-component>

subusername这个属性就是自定义的一个属性名称，目的是向子组件中传递数据的这么一个名称。而username就是父组件的data中的数据。

第二步：

自定义属性做好之后，子组件还不能直接使用，还需要接收。即：把父组件传递过来的subusername属性，需要在子组件的props数组中定义，注意是一个字符串的形式，这样的话，子组件才能使用这个数据。

也可以这么说：组件中所有的props中定义的数据，都是通过父组件传递给子组件的。

第三步：

子组件在template中使用子组件props定义的名称，就可以使用数据了。

说明几个细节问题：

对于子组件来说，也可以有自己的data属性，也就是说子组件可以有自己的数据，而data中的数据并不是通过父组件传递过来的，而是子组件自身所独有的，常用的方式是：子组件可以通过调用ajax请求数据，之后把查询出来的数据填充到data属性中。而子组件的props属性一定是从父组件传递过来的。
data属性中的数据都是可读可更改的，而props属性中的数据是只读的。

7.2.2、形式二

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

<body>
    <div id="myDiv">
        <my-component v-bind:subaddresses="fatherAddresses"></my-component>
    </div>

    <template id="myTemplate">
        <div>
            <p v-for="item in subaddresses">
                {{item}}
            </p>
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script type="text/javascript">

 // 注册组件
 Vue.component("myComponent",{
 template: "#myTemplate",
 props: {
 subaddresses: Array // 对象，可以指定类型
 }
 });

 const app = new Vue({
 el: "#myDiv",
 data: {
 fatherAddresses: [
 '河南林州',
 "陕西西安",
 "浙江杭州"
 ]
 }
 });
 </script>
</body>

指定默认值：基本类型

<body>
    <div id="myDiv">
        <my-component v-bind:subusername="fatherUsername"></my-component> // HelloWorld
        <my-component></my-component>					//使用组件没有传，就用默认的值
    </div>

    <template id="myTemplate">
        <div>
           {{subusername}}
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script type="text/javascript">

 // 注册组件
 Vue.component("myComponent",{
 template: "#myTemplate",
 props: {
 subusername: {
 type: String,
 default: "Spring"
 }
 }
 });

 const app = new Vue({
 el: "#myDiv",
 data: {
 fatherUsername: "HelloWorld"
 }
 });
 </script>
</body>

指定默认值：对象或者数组

<body>
    <div id="myDiv">
        <my-component v-bind:subaddresses="fatherAddresses"></my-component>
        <my-component></my-component>
    </div>

    <template id="myTemplate">
        <div>
           <p v-for="item in subaddresses">{{item}}</p>
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script type="text/javascript">

 // 注册组件
 Vue.component("myComponent",{
 template: "#myTemplate",
 props: {
 subaddresses: {
 type: Array,
 default: function(){
 return ['HelloWorld' , "Spring"]; // 对象或数组默认值的话要用函数
 }
 }
 }
 });

 const app = new Vue({
 el: "#myDiv",
 data: {
 fatherAddresses: [
 "河南林州",
 "浙江杭州"
 ]
 }
 });
 </script>
</body>

指定是否必传

<body>
    <div id="myDiv">
        <my-component v-bind:subusername="fatherUsername"></my-component>
        <my-component></my-component>       // 会报错,要必传才行
    </div>

    <template id="myTemplate">
        <div>
           {{subusername}}
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script type="text/javascript">

 // 注册组件
 Vue.component("myComponent",{
 template: "#myTemplate",
 props: {
 subusername: {
 type: String,
 required: true // 表示必传
 }
 }
 });

 const app = new Vue({
 el: "#myDiv",
 data: {
 fatherUsername: "HelloWorld"
 }
 });
 </script>
</body>

7.2.3、写法上的改进：驼峰

<body>
    <div id="myDiv">
        <my-component v-bind:sub-addresses="fatherAddresses"></my-component>// 标签需要"-"连接
        <my-component></my-component>
    </div>

    <template id="myTemplate">
        <div>
           <p v-for="item in subAddresses">{{item}}</p>		// 拿数据依然是驼峰法方式
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script type="text/javascript">

 // 注册组件
 Vue.component("myComponent",{
 template: "#myTemplate",
 props: {
 subAddresses: { // 驼峰命名
 type: Array,
 default: function(){
 return ['HelloWorld' , "Spring"];
 }
 }
 }
 });

 const app = new Vue({
 el: "#myDiv",
 data: {
 fatherAddresses: [
 "河南林州",
 "浙江杭州",
 "云南大理"
 ]
 }
 });
 </script>
</body>

7.3、子组件向父组件传递数据

方式：通过自定义事件向父组件发送消息

<body>
    <div id="myDiv">
        <my-component @fn="fatherFn"></my-component>
    </div>

    <template id="myTemplate">
        <div>
            <button @click="subCompClick">子组件向父组件传递参数使用的事件的方式</button>
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script type="text/javascript">

 // 定义子组件
 Vue.component("myComponent",{
 template: "#myTemplate",
 data: function(){
 return {
 person: {
 username: '我是子组件HelloWorld'
 }
 }
 },
 methods: {
 subCompClick(){
 // 点击之后，子组件发射一个自定义的事件
 this.$emit("fn",this.person);
 }
 }
 });

 const app = new Vue({
 el: "#myDiv",
 data: {
 username: "HelloWorld"
 },
 methods: {
 fatherFn(obj){
 console.log(obj);
 }
 }
 });
 </script>
</body>

解决的思路是这样的：既然我们能做到父组件的data数据传递到子组件中，我们就可以实现将父组件的方法传递到子组件中。【实际上，虽然我们现在的确是在讲子组件向父组件传递数据，如果要按照这种思维方式去实现代码的话，不太好理解，我个人更推荐这种理解方式，即：现在不考虑子组件向父组件传递数据，我们就一律看做是：父组件向子组件传递数据，如果按照这种方式来去理解的话，写代码就会顺畅很多，通过此种方式去理解代码，写着写着就自然而然的就成了子组件向父组件传递数据了。】==

子组件向父组件传递数据/父组件向子组件传递方法，步骤总结如下：

第一步

在父组件中定义一个方法。本案例中Vue实例作为父组件，自定义的方法是fatherFn 。

第二步

在应用子组件的标签上，去动态绑定一个事件。本案例中的事件是fn。

<my-component @fn="fatherFn"></my-component>

代码的含义：就相当于是将父组件中的fatherFn方法的引用传递给子组件的fn事件函数。此时该fn函数肯定是需要在某个时刻要用到的。

第三步

既然我们是子组件向父组件传递数据，那么肯定是在子组件中做了一些操作，然后将数据传递给父组件。本案例中，在子组件template中有一个button按钮，该按钮的作用就是当点击的时候，向父组件传递数据。并且为该按钮绑定了一个事件，属于该按钮的事件，是subCompClick 。

第四步

在子组件中的methods属性中去定义subCompClick事件，当点击按钮的时候就会触发该事件，那么在

subCompClick事件中，操作是：调用$emit方法去发射我们的fn事件，并且通过该方法传递数据，而我们知道，我们的fn其实就是我们第一步骤中的fatherFn 。然后在fatherFn函数中可以通过参数的形式去接收子组件传递的数据。

<body>
    <div id="myDiv">
        <my-component v-on:get-list-click="fatherHandle"></my-component>
    </div>

    <template id="myTemplate">
        <div>
            <a href=""
 v-for="item in categories"
 @click.prevent="aClick(item)">
                {{item.name}} <br>
            </a>
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script type="text/javascript">

 // 子组件
 Vue.component("myComponent",{
 template: "#myTemplate",
 data: function(){
 return {
 categories: [
 {id: 1, name: "动作片"},
 {id: 2, name: "爱情片"},
 {id: 3, name: "悬疑片"},
 {id: 4, name: "悬疑片"}
 ]
 };
 },
 methods: {
 aClick(item){
 // 点击之后，子组件发射一个自定义的事件
 this.$emit("get-list-click",item);
 }
 }
 });

 const app = new Vue({
 el: "#myDiv",
 methods: {
 fatherHandle(item){
 console.info("接收的信息是:" ,item);
 }
 }
 });
 </script>
</body>

7.4、案例

该案例：子组件向父组件传数据综合运用。该案例是我们二期jQuery的一个案例：发表评论的案例。

7.4.1、第一步：先把数据给模拟出来

<body>
    <div id="myDiv">
        <p v-for="item in list" :key="item.id">
            评论人: {{ item.user }} 内容: {{ item.content }} 发表日期: {{ item.pubDate }}
        </p>
    </div>

    <script src="../js/vue.js"></script>
    <script type="text/javascript">

 const app = new Vue({
 el: "#myDiv",
 data: {
 list: [
 {id: 1, user: 'HelloWorld', content: '美好的一天', pubDate: new Date()},
 {id: 2, user: 'Spring', content: '很高兴', pubDate: new Date()}
 ]
 }
 });
 </script>
</body>

7.4.2、第二步：定义子组件，发表评论

<body>
    <div id="myDiv">
        
        <my-component></my-component>

        <p v-for="item in list" :key="item.id">
            评论人: {{ item.user }} 内容: {{ item.content }} 发表日期: {{ item.pubDate }}
        </p>
    </div>

    <template id="myTemplate">
        <div>
            评论id: <input type="text"> <br/>
            评论人: <input type="text"> <br/>
            评论内容：<textarea></textarea><br/>
            <input type="button" value="提交">
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script type="text/javascript">

 Vue.component("myComponent",{
 template: "#myTemplate",
 });

 const app = new Vue({
 el: "#myDiv",
 data: {
 list: [
 {id: 1, user: 'HelloWorld', content: '美好的一天', pubDate: new Date()},
 {id: 2, user: 'Spring', content: '很高兴', pubDate: new Date()}
 ]
 }
 });
 </script>
</body>

7.4.3、第三步：点击发表评论

为表单控件绑定v-model，目的是获取数据
绑定的数据需要定义在子组件template的data中
为发表按钮提供单击事件

<body>
    <div id="myDiv">

        <my-component @fn="fatherFn"></my-component>

        <p v-for="item in list" :key="item.id">
            评论人: {{ item.user }} 内容: {{ item.content }} 发表日期: {{ item.pubDate }}
        </p>
    </div>

    <template id="myTemplate">
        <div>
            评论id: <input type="text" v-model="id"> <br/>
            评论人: <input type="text" v-model="user"> <br/>
            评论内容：<textarea v-model="content"></textarea><br/>
            <input type="button" value="发表" @click="publish">
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script type="text/javascript">

 Vue.component("myComponent",{
 template: "#myTemplate",
 data:function(){
 return {id: '' , user: '' , content: ''}
 },
 methods: {
 publish: function(){
 // 发表评论业务处理
 // 1、构造一个评论数据对象
 let comment = {id: this.id, user: this.user , content: this.content, pubDate: new Date()};

 // 2、需要将创建好的评论数据保存到父组件中的data中,涉及到了子组件向父组件传值
 // >> 子组件发射一个自定义的事件
 this.$emit("fn",comment);
 }
 }
 });

 const app = new Vue({
 el: "#myDiv",
 data: {
 list: [
 {id: 1, user: 'HelloWorld', content: '美好的一天', pubDate: new Date()},
 {id: 2, user: 'Spring', content: '很高兴', pubDate: new Date()}
 ]
 },
 methods: {
 fatherFn(comment){
 // 刚刚新增评论就插入到数组的头部
 this.list.unshift(comment);
 }
 }
 });
 </script>
</body>

八、综合案例

说明：该案例体现了父子组件相互传递数据。

8.1、第一步：实现父组件数据传递给子组件

<body>
    <div id="myDiv">
      	父组件的数据：{{username}} {{age}}
        <my-component :subusername="username" :subage="age"></my-component>
    </div>

    <template id="myTemplate">
        <div>
            通过props属性获取到的父组件中的数据：{{subusername}}---{{subage}}
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script type="text/javascript">

 Vue.component("myComponent",{
 template: "#myTemplate",
 props: {
 subusername: String,
 subage: Number
 }
 });

 const app = new Vue({
 el: "#myDiv",
 data: {
 username: 'HelloWorld',
 age: 12
 }
 });
 </script>
</body>

说明：通过案例可以发现，子组件的确可以使用到了父组件中的数据。子组件可以使用props中的数据并显示到页面上，不过props中的数据是从父组件中获取的，是只读数据。

8.2、第二步：看一个细节问题

在子组件中，定义两个input，实现双向绑定，绑定到了props属性的subusername和subage这两个属性，看下实验效果。

<body>
    <div id="myDiv">
      	父组件的数据：{{username}} {{age}}
        <my-component :subusername="username" :subage="age"></my-component>
    </div>

    <template id="myTemplate">
        <div>
            通过props属性获取到的父组件中的数据：{{subusername}}---{{subage}} <br/>
            双向绑定props属性中的subusername: <input type="text" v-model="subusername"><br/>
            双向绑定props属性中的subage: <input type="text" v-model="subage"><br/>
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script type="text/javascript">

 Vue.component("myComponent",{
 template: "#myTemplate",
 props: {
 subusername: String,
 subage: Number
 }
 });

 const app = new Vue({
 el: "#myDiv",
 data: {
 username: 'HelloWorld',
 age: 12
 }
 });
 </script>
</body>

通过实验发现，该案例是有问题的，控制台会报错。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UlBrOQmL-1690870417750)(/005.png)]

结论：根据提示，避免去直接修改props属性中的数据，因为props属性中的数据都是通过父组件传递过来的，是只读的，避免去覆盖。取而代之的是，可以使用data和computed计算属性。

常用的JavaScript设计模式

单体模式
工厂模式
例模式

函数

函数的定义
局部变量和全局变量
返回值
匿名函数
自运行函数
闭包

2401_85124737

关注

22
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
打造灵活可复用的Web应用：Vue组件化开发指南！_vue web 控件

这个是父组件`,children});father});评论人: {{ item.user }} 内容: {{ item.content }} 发表日期: {{ item.pubDate }}
复制链接

扫一扫