• VUE学习笔记--组件选项


    Vue 的组件最核心的选项有以下几个: 
    模板(template)
    初始数据(data)
    接受的外部参数(props)
    方法(methods)
    生命周期钩子函数(lifecycle hooks)
    组件 props
    组件中更重要的是组件间进行通信,选项props是组件中非常重要的一个选项,起到父子组件间桥梁的作用。
    1.静态props
    子组件使用父组件的数据
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8"/>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <my-componet message="来至父组件的数据!!"></my-componet>
    </div>
    <script type="text/javascript">
        Vue.component('my-componet', {
            // 声明 props
            props: ['message'],
            // 就像 data 一样,prop 可以用在模板内
            // 同样也可以在 vm 实例中像 “this.message” 这样使用
            template: '<span>{{ message }}</span>'
        })
        new Vue({
            el:'#app'
        });
    </script>
    </body>
    </html>
    动态 props 
    动态接收父组件数据到子组件
    
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8"/>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <input type="text" v-model="parentMessage">
        <my-componet :message="parentMessage"></my-componet>
    </div>
    <script type="text/javascript">
        Vue.component('my-componet', {
            props: ['message'],
            template: '<span>{{ message }}</span>'
        })
        new Vue({
            el:'#app',
            data:{
                parentMessage:''
            }
        });
    </script>
    </body>
    </html>
    这里使用 v-model 绑定了父组件数据 parentMessage,当在输入框中输入数据时,子组件接收到的 props“'message'”也会实时响应,并更新组件模板。 
    如果你在父组件中直接传递数字、布尔值、数组、对象时, 它所传递默认值字符串。如果想传递一个实际的数值,需要使用 v-bind ,从而让它的值被当作 JavaScript 表达式计算,代码如下:
    
    <div id="app">
        <my-componet message="1+1"></my-componet><br>
        <my-componet :message="1+1"></my-componet>
    </div>
    <script type="text/javascript">
        Vue.component('my-componet', {
            props: ['message'],
            template: '<span>{{ message }}</span>'
        })
        new Vue({
            el:'#app'
        });
    </script>
     props 验证
    当组件给其他人使用时,推荐进行数据验证。
    验证的type类型可以是:String、Number、Boolean、Function、Object、Array等。
    如果传入子组件的 message 不是数字,则抛出警告
    
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8"/>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    <div id="example">
        <parent></parent>
    </div>
    <script>
        var childNode = {
            template: '<div>{{message}}</div>',
            props:{
                'message':Number
            }
        }
        var parentNode = {
                template:'<div class="parent"><child :message="msg"></child></div>',
                components: {
                    'child': childNode
                },
                data(){
                return{
                    msg: '123'
                }
        }
        };
        // 创建根实例
        new Vue({
            el: '#example',
            components: {
                'parent': parentNode
            }
        })
    </script>
    </body>
    </html>
    单项数据流
    所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。之所以这样设计,是尽可能将父子组件解耦,避免子组件无意中修改了父组件的状态。
    
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8"/>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    <div id="example">
        <parent></parent>
    </div>
    <script>
        var childNode = {
                template:
            '<div class="child"><div><span>子组件数据</span>' +
                    ' <input v-model="childMsg"> </div> <p>{{childMsg}}</p></div>' ,
            props:['childMsg']
        }
        var parentNode = {
                template:
            '<div class="parent"><div><span>父组件数据</span>' +
                    ' <input v-model="msg"> </div> <p>{{msg}}</p> <child :child-msg="msg"></child></div>',
            components: {
                'child': childNode
            },
            data(){
            return {
                'msg':'match'
            }
        }
        };
        // 创建根实例
        new Vue({
            el: '#example',
            components: {
                'parent': parentNode
            }
        })
    </script>
    </body>
    </html>
    组件通信
    
    组件关系有下面三种:父-->子、子-->父、非父子。

    自定义事件
    当子组件需要向父组件传递数据时,就要用到自定义事件。
    
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8"/>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <my-component v-on:myclick="onClick"></my-component>
    </div>
    <script>
        Vue.component('my-component', {
            template:'<div>' +
                '<button type="button" @click="childClick">点击我触发自定义事件</button></div>' ,
            methods: {
                childClick () {
                    this.$emit('myclick', '这是我暴露出去的数据', '这是我暴露出去的数据2')
                }
            }
        })
        new Vue({
            el: '#app',
            methods: {
                onClick () {
                    console.log(arguments)
                }
            }
        })
    </script>
    </body>
    </html>
    $emit/$on
    这种方法通过一个空的Vue实例作为中央事件总线(事件中心),用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信,包括父子、兄弟、跨级。当我们的项目比较大时,可以选择更好的状态管理解决方案vuex
    
    var Event=new Vue();
        Event.$emit(事件名,数据);
        Event.$on(事件名,data => {});
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8"/>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <my-a></my-a>
        <my-b></my-b>
        <my-c></my-c>
    </div>
    <template id="a">
        <div>
            <h3>A组件:{{name}}</h3>
            <button @click="send">将数据发送给C组件</button>
        </div>
    </template>
    <template id="b">
        <div>
            <h3>B组件:{{age}}</h3>
            <button @click="send">将数组发送给C组件</button>
        </div>
    </template>
    <template id="c">
        <div>
            <h3>C组件:{{name}},{{age}}</h3>
        </div>
    </template>
    <script>
        var Event = new Vue();//定义一个空的Vue实例
        var A = {
            template: '#a',
            data() {
            return {
                name: 'beixi'
            }
        },
            methods: {
                send() {
                    Event.$emit('data-a', this.name);
                }
            }
        }
        var B = {
            template: '#b',
            data() {
            return {
                age: 18
            }
        },
            methods: {
                send() {
                    Event.$emit('data-b', this.age);
                }
            }
        }
        var C = {
            template: '#c',
            data() {
            return {
                name: '',
                    age: ""
        }
        },
            mounted() {//在模板编译完成后执行
            Event.$on('data-a',name => {
                this.name = name;//箭头函数内部不会产生新的this,这边如果不用=>,this指代Event
            })
            Event.$on('data-b',age => {
                this.age = age;
            })
        }
        }
        var vm = new Vue({
            el: '#app',
            components: {
                'my-a': A,
                'my-b': B,
                'my-c': C
            }
        });
    </script>
    </body>
    </html>
  • 相关阅读:
    17 Letter Combinations of a Phone Number(medium)
    16 3Sum closest(medium)
    15 3Sum(medium)
    linux环境下搭建自动化Jenkins管理工具
    Danjgo学习笔记(五)----Django数据库的查询
    Danjgo学习笔记(五)----Django中表的关系
    Django常见的Field
    selenium+python+ip池 实现博客园刷博客浏览量
    Danjgo学习笔记(五)----常见模板过滤器和自制过滤器
    Danjgo学习笔记(四)---danjgo框架内的常用标签
  • 原文地址:https://www.cnblogs.com/tszr/p/15415939.html
Copyright © 2020-2023  润新知