08-Vue_组件交互 - Vue

Home > List of blog posts > 08-Vue_组件交互

Blogger Information

Blog 128

fans 9

comment 5

visits 241315

Special Recommendation

More>

Related recommendations

一、创建组件

什么是组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；
组件化和模块化的不同：

模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；

1.1 创建全局组件

注意：模板中有且只有一个根元素，就像一个网页只有一个根元素为<html>一样

1.1.1 第一种方式

使用 Vue.extend 配合 Vue.component 方法：

var com1 = Vue.extend({
    template: '<h2>第一种方式</h2>',
    data(){
        return{
        }
    }
});
Vue.component('mycom1', com1);

直接使用 Vue.component 方法：

Vue.component('mycom2', {
    template: '<h4>第一种方式的最终简写</h4>',
    data(){
        return {
        }
    }
});

1.1.2 第二种创建方式

将模板字符串，定义到script标签中：

<script id="tmpl" type="template">
    <div>
          <a href="#">{{msg.login}}</a> | <a href="#">{{msg.register}}</a>
    </div>
</script>

同时，需要使用 Vue.component 来定义组件：

Vue.component('account', {
      template: '#tmpl',
      data(){
            return{
                msg: {login: '登录',register: '注册'}
            }
      }
});

1.1.2 第三种创建方式

在<template>中定义 HTML 结构

<template id="tmp">
    <div>
        <h2>第二种方式</h2>
        <h3 v-text="msg"></h3>
    </div>
</template>

使用 Vue.component 中 template 属性进行调用

Vue.component('myCom3', {
    template: '#tmp',
    data(){
        return{
            msg: '好耶~'
        }
    }
});

1.2 创建私有组件

new Vue({
    el: '#app',
    data: {},
    methods:{},
    filters:{},
    directives:{},
    components: {
        myLogin: {
            template: `<div>
                            <h1>login 组件</h1>
                            <p>私有组件</p>
                       </div>`,
            data(){
                return{
                }
            }
         }
   },
    beforeCreate(){},
    created(){},
    beforeMount(){},
    Mounted(){},
    beforeUpdate(){},
    updated(){},
    beforeDestroy(){},
    destroyed(){}
});

注意：组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！

分离私有组件的定义，将组件模板对象分开定义

const myLogin = {
            template: `<div>
                            <h1>login 组件</h1>
                            <p>私有组件</p>
                       </div>`,
            data(){
                return{
                }
            }
         }
new Vue({
    el: '#app',
    data: {},
    methods:{},
    components: {
        // 组件名称：组件的模板对象
       //  myLogin: myLogin
       myLogin,
   }
});

1.3 组件的嵌套

我们的子组件是可以多级嵌套的，子组件中还可以在声明子组件。

<div id="app">
    <account></account> 
</div>
<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: {  
        account: {  
          template: `<div>
                        <h1>这是Account组件{{name}}</h1>
                        <login></login>
                        <register></register>
                    </div>`, 
          data(){
              return {
                  name: 'hello world!'
              }
          },
          components: {  
            login: {  
              template: "<h3>这是登录组件</h3>"
            },
            register: {
                template: '<h3>这是注册组件</h3>'
            }
          }
        }
      }
    });
</script>

1.4 组件使用方式

在HTML中直接用标签应用即可

<div id="app">
    <mycom1></mycom1>
    <mycom2></mycom2>
    <my-com3></my-com3>
    <my-login></my-login>
</div>

非驼峰命名法，则直接照着写就好了
驼峰命名法：定义时使用驼峰，使用时需要以 “ - ” 分隔

二、组件中展示数据和响应事件

data 定义方式不太一样，但是使用方式和实例中的 data 没什么太大区别
因为组件需要被重用，为了让每个组件有自己的私有作用域，data需要为函数并且返回一个对象
在组件中，data需要被定义为一个方法

通过计数器案例演示

<div id="app">
    <myCount></myCount><hr>
    <myCount></myCount><hr>
    <myCount></myCount><hr>
</div>
<template id="tmp">
    <input type="button" value="+1" @click="increment">
    <h3 v-text="count"></h3>
</template>
<script>
    Vue.component('myCount',{
        template: '#tmp',
        data: function (){
            return {
                count: 0
            }
        },
        methods:{
            increment(){
                this.count++;
            }
        }
    });
    new Vue({
        el:'#app',
        data:{ },
        methods:{ }
    })
</script>

三、组件切换

3.1 使用 v-if 和 v-else 配合进行切换

<div id="app">
    <a href="" @click.prevent="flag = true">登录</a>
    <a href="" @click.prevent="flag = false">注册</a>
    <transition mode="out-in">
        <login v-if="flag"></login>
        <register v-else="flag"></register>
    </transition>
</div>
<script>
    Vue.component('login',{
    template: '<h3>登录组件</h3>'
    })
    Vue.component('register',{
        template: '<h3>注册组件</h3>'
    })
    new Vue({
        el: '#app',
        data:{
            flag: true,
        },
        methods:{
        }
    })
</script>

3.2 使用`<component>`进行切换

:is 指定要显示的组件名称

<style>
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(150px);
        }
        .v-enter-active,
        .v-leave-active {
            transition: all .5s ease;
        }
</style>
<div id="app">
    <a href="" @click.prevent="comName = 'login'">登录</a>
    <a href="" @click.prevent="comName = 'register'">注册</a>
    <a href="" @click.prevent="comName = 'forget'">忘记密码</a>
    <!-- 通过mode属性，设置组件切换时候的模式 -->
    <transition mode="out-in">
            <component :is="comName"></component>
    </transition>
</div>
<script>
    Vue.component('login',{
    template: '<h3>登录组件</h3>'
    })
    Vue.component('register',{
        template: '<h3>注册组件</h3>'
    })
    Vue.component('forget',{
        template: '<h3>忘记密码组件</h3>'
    })
    new Vue({
        el: '#app',
        data:{
            comName: 'login'
        },
        methods:{
        }
    })
</script>

四、父组件向子组件传值(属性)

注意：一定要使用props属性来定义父组件传递过来的数据，由于 props 默认是单向绑定，即父组件的属性发生改变，子组件也会改变。反之则不会。props中数据是只读的
使用v-bind或简化指令:，将数据传递到子组件中

<div id="app">
        <!-- 父组件可以在引用子组件的时候，通过属性绑定的形式 ，把需要传递给子组件的数据，以属性绑定的形式传递到子组件内部供使用-->
        <my-component v-bind:parentmsg="msg" :msg="message"></my-component>
</div>
<script>
        Vue.component('myComponent', {
            template: '<span>{{ parentmsg }}--{{msg}}</span>',
            // props：声明待接收的父组件数据
            // props中数据都是只读的，无法重新赋值
            props: ['parentmsg', 'msg'],
            // 把父组件传递过来的parentmsg和msg属性，现在props数组中定义一下，这样才能使用父组件传递过来的数据
            data() {
                return {
                    // 子组件中也可以有自己的数据在data中
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello 子组件',
                message: 'hello world'
            }
        })
</script>

绑定修饰符

<div id="app">
    <!-- 默认 单向绑定 -->
    <my-component :msg="message"></my-component>
    <!-- 双向绑定 -->
    <my-component :msg.sync="message"></my-component>
    <!-- 单向绑定 -->
    <my-component :msg.once="message"></my-component>
</div>

注意：若传递引用类型，则无论哪种绑定类型，在子组件修改 props 都会影响父组件的状态。

props 类型验证

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

五、父子组件间的事件通信（方法）

使用事件绑定机制，父组件向子组件传递方法，绑定后，子组件可以通过某些方式来调用传递过来的这个方法了
原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去；
父组件将方法的引用传递给子组件，其中，getMsg是父组件中methods中定义的方法名称，func是子组件调用传递过来方法时候的方法名称

  <son v-on:func="show"></son>

子组件内部通过this.$emit('方法名', 要传递的数据)方式，来调用父组件中的方法，同时把数据传递给父组件使用

<div id="app">
    <h1>{{msg}}</h1>
    <!-- 父组件向子组件传递方法，使用的是事件绑定机制 -->
    <!-- v-on，当我们自定义了一个事件属性之后，那么子组件就能够通过某种方式来调用 -->
    <son @func="getMsg"></son>
</div>
<!-- 组件模板定义 -->
<template id="son">
   <div>
        <h1>这是子组件</h1>
         <input type="button" value="向父组件传值" @click="sendMsg" />
   </div>
</template>
<script>
    const son = {
      template: '#son', // 组件模板Id
      data(){
          return {
              msg: "我是子组件传递过来的数据"
          }
      },
      methods: {
        sendMsg() { // 按钮的点击事件
          // 我们可以通过调用父组件传递过来的方法，将子组件数据通过参数形式传递给父组件中
          this.$emit('func', this.msg); // 调用父组件传递过来的方法，同时把数据传递出去
        }
      }
    }
    // 子组件的定义方式
    Vue.component('son',son);
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
          msg: "父组件"
      },
      methods: {
        getMsg(val){ // 子组件中，通过 this.$emit() 实际调用的方法，在此进行定义
              this.msg = val;
            console.log("调用了父组件身上的getMsg方法");
            alert(val);
        }
      }
    });
</script>

5.1 $emit() 与 $on() 函数

vm.$emit( event, arg ) // 触发当前实例上的事件
vm.$on( event, fn ) // 监听 event 事件后运行 fn；
用法：
1. 父组件可以使用 props 把数据传给子组件。
2. 子组件可以使用 $emit 触发父组件的自定义事件。

六、非父子组件事件通信

6.1 父子组件访问

$parent：访问当前组件的父组件
$root：访问当前主键的根组件

6.2 ref 获取DOM元素和组件

我们可以在元素上使用ref属性，然后赋予一个优雅的名字

<h3 ref="myh3">我是H3</h3>
<!-- login组件 -->
<login ref="login"></login>

在实例中，我们通过$refs来获取DOM

getElement() {    console.log(this.$refs.myh3);    console.log(this.$refs.login.$el.innerText);}

七、组件的应用案例

7.1 分页组件

<style>
    .pagination {
        display: flex;
        list-style: none;
    }
    .page-item {
        width: 25px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        border: 1px solid #ccc;
    }
    .page-item.active {
        background-color: skyblue;
    }
</style>
<div id="app">
    <page-component :total="total"></page-component>
</div>
<template id="page-component">
    <ul class="pagination">
        <li :class="p == page ? 'page-item active' : 'page-item'" v-for="p in pagecount">
            <a href="#" class="page-link" @click.prevent="page = p">{{ p }}</a>
        </li>
    </ul>
</template>
<script>
    const pageComponent = {
        template: '#page-component',
        name: 'PageComponent',
        props: ['total'],
        data: function() {
            return {
                page: 1, // 当前页码
                pagesize: 10 // 每页显示条数
            }
        },
        computed: {
            pagecount: function() {
                // 总页码数
                return Math.ceil(this.total / this.pagesize)
            }
        }
    }
    var vm = new Vue({
        el: '#app',
        data: {
            total: 35
        },
        components: {
            pageComponent
        }
    })
</script>

7.2 购物车组件

<div id="app">
    <div v-for="goods in goodslist">
        <p>商品名称：{{ goods.name }}</p>
        <p>单价：{{ goods.price }}</p>
        <cart-component v-model="goods.count"></cart-component>
        <hr>
    </div>
    <div>
        订单总金额：{{ amount }} 元
    </div>
</div>
<template id="cart-component">
    <div class="cart">
        <button @click="count--; updateCount();">-</button>
        <input type="text" v-model="count" style="width: 50%;" @input="updateCount()">
        <button @click="count++; updateCount();">+</button>
    </div>
</template>
<script>
    const cartComponent = {
        name: 'Cart',
        template: '#cart-component',
        // 在组件中不允许直接修改 props 中的数据
        props: ['value'],
        data: function() {
            return {
                count: this.value
            }
        },
        methods: {
            // v-model 指令双向数据绑定，修改父组件内容
            updateCount: function() {
                // 触发 input 事件
                this.$emit('input', this.count)
            }
        }
    }
    const app = new Vue({
        el: '#app',
        data: {
            goodslist: [
                {
                    name: 'iphone 8 plus',
                    price: 5888,
                    count: 0
                },
                {
                    name: 'iphone x',
                    price: 7222,
                    count: 0
                }
            ]
        },
        computed: {
            // 当前订单总金额
            amount: function() {
                var money = 0;
                this.goodslist.forEach(goods => {
                    money += parseInt(goods.count) * parseInt(goods.price)
                })
                return money;
            }
        },
        components: {
            cartComponent
        }
    })
</script>

7.3 评论列表案例

    <div id="app">
        <cmt-box @loadcomments="loadComments"></cmt-box>
        <ul class="list-group">
            <li class="list-group-item" v-for="item in list" :key="item.id">
                <span class="badge">评论人：{{item.user}}</span> {{item.content}}
            </li>
        </ul>
    </div>
    <template id="temp">
        <div>
            <div class="form-group">
                <label for="">评论人：</label>
                <input type="text" class="form-control" v-model="user">
            </div>
            <div class="form-group">
                <label for="">评论内容：</label>
                <textarea class="form-control" v-model="content"></textarea>
            </div>
            <div class="form-group">
                <input type="button" value="发表评论" @click="postComment">
            </div>
        </div>
    </template>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                list: []
            },
            methods: {
                loadComments() {
                    const list = JSON.parse(localStorage.getItem('cmts') || '[]');
                    this.list = list;
                    console.log(6666);
                }
            },
            created() {
                this.loadComments();
            },
            components: {
                'cmt-box': {
                    template: '#temp',
                    data() {
                        return {
                            user: '',
                            content: ''
                        }
                    },
                    methods: {
                        postComment() {
                            const comment = {
                                id: Date.now(),
                                user: this.user,
                                content: this.content
                            };
                            // 从localStorage中获取所有的评论
                            const list = JSON.parse(localStorage.getItem('cmts') || '[]');
                            list.unshift(comment);
                            // 保存最新的评论数据
                            localStorage.setItem('cmts', JSON.stringify(list));
                            this.user = this.content = '';
                            this.$emit('loadcomments');
                        }
                    },
                }
            }
        });
    </script>

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

程序员必备技能五分钟教你学会Markdown的写作基本语法

2021-03-18 14:24:11