vue组件定义方式，vue父子组件间的传值

<!DOCTYPE html>
<html lang="zh-cn">

    <head>
        <meta charset="utf-8">
    </head>

    <body>
        <div id="app">
            <my-nav></my-nav>
            <hr>
            <my-nav2></my-nav2>
            <hr>
            <my-demo></my-demo>
            <hr>
            <script-nav></script-nav>
            <hr>
            <my-tmp></my-tmp>
            <hr>
            <button @click="show = !show">切换动态组件</button>
            <component :is="show ?'my-nav':'my-nav2'"></component>
            <hr>
            <parent></parent>
        </div>
        <hr>
        <div id="myNav"></div>
        <script type="nav-template" id="my-nav">
            <h2>我是script中的模板</h2>
        </script>
        <template id="my-tmp">
            <h2 bgcolor="pink">我是template中的模板</h2>
        </template>
        <script src="vue.js"></script>
        <script>
        //组件: 一个大对象
        // 注册组件  (两种编写方式)
        // 注册组件，传入一个扩展过的构造器
        // Vue.component('my-component', Vue.extend({ /* ... */ }))
        // 注册组件，传入一个选项对象 (自动调用 Vue.extend)
        // Vue.component('my-component', { /* ... */ })

        //1.全局组件 （注册组件的位置在全局环境）
        //方式一：
        //1.1定义组件
        var myNav = Vue.extend({
            template: '<h3>我是my-nav组件->{{msg}}</h3>',
            data() {
                return {
                    msg: '我是组件中的数据'
                }
            }
        })
        //挂载到Vue的构造函数上，所有的Vue实例（vm）都共享这个组件，
        //所以就成了全局组件
        Vue.component('my-nav', myNav);
        //全局组件也可以实例化后直接绑定到具体的元素上
        //原理：因为myNav继承自Vue，所以也可以作为构造函数
        //同样具有Vue的实例方法.$mount()
        new myNav().$mount('#myNav');

        //方式二： 第二个参数是一个对象
        Vue.component('my-nav2', {
            template: '<h4>我是my-nav2222222222222组件->22222222</h4>',
        });
        //2.局部组件 （注册组件的位置在Vue的选项中）
        // 局部组件可以在Vue 的选项（配置项）中定义（my-demo），也可以使用全局已定义好的组件(my-nav)   

        var vm = new Vue({
            data: {
                msg: 13,
                show: true
            },
            components: {
                'my-demo': {
                    template: '<h2>我是一个纯内部组件</h2>'
                },
                'my-nav': myNav, //我是一个使用了全局定义的内部组件
                'script-nav': {
                    template: '#my-nav'
                },
                'my-tmp': {
                    template: '#my-tmp'
                },
                'parent': {
                    template: '<h2>我是父组件-><child :msg-p="msgP"  @childMsg="childMsg"></child>{{msgC}}</h2>',
                    data() {
                        return {
                            msgP: '我是父组件中的数据',
                            msgC:'',
                        }
                    },
                    methods:{
                        childMsg(msg){
                            this.msgC = msg
                        }
                    },
                    components: {
                        'child': {
                            template: '<div><h2>我是子组件->这是我拿到的父组件的数据->{{msgP}}</h2><button @click="send">发送</button></div>',
                            // props:['msgP'],     //方式一['','']
                            props:{
                                msgP:String
                            },
                            data() {
                                return {
                                    msgC: '我是子组件中的数据'
                                }
                            },
                            methods:{
                                send(){
                                    //vm.$emit('事件名称',数据)
                                    this.$emit('childMsg',this.msgC);
                                    vm.$emit('test', 'hi')
                                }
                            }
                        },
                    }

                }
            }
        }).$mount('#app');

        vm.$on('test', function (msg) {
          console.log(msg)
          setTimeout(function(){
            vm.$off()
          },5000)
        })

        //组件模板
        //1. template: '<h4>我是my-nav组件</h4>',
        //组件的模板：在实际项目开发中，模板的标签一般很多，直接写到js中不是很方便
        //2.可以将模板单独放在某个地方
        //2.1 <script type="nav-template" id="my-nav">
        //2.2 <template id="my-tmp">

        //3.动态组件
        // <component :is="组件名称"></component>
        
        //4.父子组件之间的通信
        //4.1 子组件获取父组件的数据 （属性传值）
        // 在父组件中调用子组件，给子组件绑定一个自定义属性，属性值为要传过云的值
        // 在子组件选项中有个 props获取这个自定义属性值，方法有两种：
        // 4.1.1 数组形式 props : ['属性名']
        // 4.1.2 对象形式 props : {'属性名'：String,'属性名':'属性值类型'}
        // 
        //4.2 父组件获取子组件的数据 （事件系统--方法传参）
        //原理：子组件触发了父组件上的自定义事件，自定义事件的参数就是子组件要传给父组件的值。


        </script>
    </body>

</html>
vue组件定义方式，vue父子组件间的传值

猜你喜欢
