08-Vue_组件交互

一、创建组件

什么是组件：组件的出现，就是为了拆分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>

进行切换" class="reference-link">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>

一、创建组件

1.1 创建全局组件

1.1.1 第一种方式

1.1.2 第二种创建方式

1.1.2 第三种创建方式

1.2 创建私有组件

1.3 组件的嵌套

1.4 组件使用方式

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

三、组件切换

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

进行切换" class="reference-link">3.2 使用`<component>`进行切换

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

绑定修饰符

props 类型验证

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

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

六、非父子组件事件通信

6.1 父子组件访问

6.2 ref 获取DOM元素和组件

七、组件的应用案例

7.1 分页组件

7.2 购物车组件

7.3 评论列表案例

更多相关文章

随机推荐

08-Vue_组件交互

一、创建组件

1.1 创建全局组件

1.1.1 第一种方式

1.1.2 第二种创建方式

1.1.2 第三种创建方式

1.2 创建私有组件

1.3 组件的嵌套

1.4 组件使用方式

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

三、组件切换

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

进行切换" class="reference-link">3.2 使用<component>进行切换

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

绑定修饰符

props 类型验证

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

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

六、非父子组件事件通信

6.1 父子组件访问

6.2 ref 获取DOM元素和组件

七、组件的应用案例

7.1 分页组件

7.2 购物车组件

7.3 评论列表案例

更多相关文章

随机推荐

进行切换" class="reference-link">3.2 使用`<component>`进行切换