vue.js 创建组件子父通信父子通信非父子通信

2021-06-28 18:03

阅读：406

标签：color doctype second utf-8 属性绑定特定 event 控制

1.创建组件

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>创建组件title>
    script src="https://unpkg.com/vue/dist/vue.js">script>
head>
body>

    div id="demo">
        
        my-component>my-component>
    div>
    script>
        var myComponent=Vue.extend({
            template:"这是一个组件"
        });
        Vue.component("my-component",myComponent);//这里注意将my-component用引号引起来。
        new Vue({
            el:"#demo"
        })
    script>
body>
html>

2.创建组件简写

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>创建组件简写title>
    script src="https://unpkg.com/vue/dist/vue.js">script>
head>
body>
    
    div id="demo">
        my-component>my-component>
    div>
    script>
        Vue.component("my-component",{
            template:"这是一个简写组件"
        });
        new Vue({
            el:‘#demo‘
        })
    script>
body>
html>

3.创建复合组件

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>创建复合组件title>
    script src="https://unpkg.com/vue/dist/vue.js">script>
head>
body>
    
    div id="demo">
        parent-component>parent-component>
    div>
    script>
        //创建一个子组件
        var Child=Vue.component("child-component",{
            template:"我是子组件"
        });
        //创建一个父组件
        Vue.component("parent-component",{
            template:"{{message}}
", //注意元素模板只能有一个最上层元素，也就是用一个div包裹整个模板。
            components:{"child-component":Child},//进行子组件关联，注意child-component需要引号。
            data:function(){//组件中的data是一个函数
                return {
                    message:"我有一个子组件"
                }
            }
        })
        //创建一个vue的实例
        new Vue({
            el:"#demo"
        })
    script>
body>
html>

4.创建动态组件

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>创建动态组件title>
    script src="https://unpkg.com/vue/dist/vue.js">script>
head>
body>

    div id="demo">
         
        keep-alive include="First,Second,Third">
            
            component v-bind:is="options">component>
        keep-alive>
        button id="btn" v-on:click="toggle()">切换组件button>
    div>
    script>
        var vm=new Vue({
            el:‘#demo‘,
            data:{
                options:"First"//options绑定到is特性
            },
            components:{//建立三个组件分别是First,Second,Third
                First:{
                    template:"first"
                },
                Second:{
                    template:"second"
                },
                Third:{
                    template:"third"
                }
            },
            methods:{
                toggle:function(){
                    var arr = ["First","Second","Third"];
                    var index = arr.indexOf(this.options);
                    this.options = index2?arr[index+1]:arr[0];
                    console.log(this.$children);//这里显示缓存的值。
                }
            }
        })
        console.log(vm.$children);
    script>

body>
html>

5.创建复合组件

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>创建复合组件title>
    script src="https://unpkg.com/vue/dist/vue.js">script>
head>
body>
    
    div id="demo">
        parent-component>parent-component>
    div>
    script>
        //创建一个子组件
        var Child=Vue.component("child-component",{
            template:"我是子组件"
        });
        //创建一个父组件
        Vue.component("parent-component",{
            template:"{{message}}
", //注意元素模板只能有一个最上层元素，也就是用一个div包裹整个模板。
            components:{"child-component":Child},//进行子组件关联，注意child-component需要引号。
            data:function(){//组件中的data是一个函数
                return {
                    message:"我有一个子组件"
                }
            }
        })
        //创建一个vue的实例
        new Vue({
            el:"#demo"
        })
    script>
body>
html>

6.创建父传子通信组件

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>创建父传子通信组件title>
    script src="https://unpkg.com/vue/dist/vue.js">script>
head>
body>

    div id="demo">
        
        parent-component v-bind:parent_props = "vmData">parent-component>
    div>
    script>
//        创建一个子组件
        var Child = Vue.component("child-component",{
            template:"{{child_props}}",
            props:["child_props"]//子组件props,很奇怪props的属性值不可以用驼峰式，也不能有-，所以我只能用_来将单词分开╮(╯▽╰)╭
        })
//        创建一个父组件
        Vue.component("parent-component",{
            template:"{{msg}}
",//v-bind:child_props="parent_props"是实现父子props连通的关键。
            props:["parent_props"],//父组件props属性，它是一个数组。
            components:{//将子组件添加到父组件
                "child-component":Child
            },
            data:function(){
                return {
                    msg:"我是打酱油的"//不想让父组件直接包裹子组件，所以才加上的附加品。
                }
            }
        })
        //创建一个vue实例
        new Vue({
            el:‘#demo‘,
            data:{
                vmData:"我是子组件"
            }
        })
    script>
body>
html>

7.创建子传父通信组件

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>创建子传父复合组件title>
    script src="https://unpkg.com/vue/dist/vue.js">script>
head>
body>
div id="div">
    parent-component>parent-component>
div>
script>
    /*
    * 需求：点击一个按钮，然后在按钮下面的显示点击次数，
    * 思路：按钮为子组件，显示次数为父组件，在子组件的methods中加入clickEvent方法，在方法中书写emit来进行子组件和父组件的关联，通常子传父都是通过事件来触发。
    * 步骤：1.创建一个子组件，子组件中有一个按钮，在按钮添加一个点击事件调用方法clickEvent，在方法内写this.$emit("clickEvent")，在html中子组件的属性childPropKey=""childPropValue。
    *       2.创建一个父组件，父组件有一个插值{{num}},在父组件的methods中加入方法parentMethods.
    *       3.创建mv实例
    *
    * */
    var Child=Vue.component("child-component",{
        template:"",
        methods:{
            clickEvent:function(){
                this.$emit("clickEvent");//这里是实现子传父的关键。
            }
        }
    })
    Vue.component("parent-component",{
        template:"父组件的数字:{{num}}

",
        data:function(){
            return {num:0}
        },
        methods:{
            parentMethods:function(){
                this.num++;
            }
        },
        components:{"child-component":Child}
    })
    new Vue({
        el:‘#div‘
    })
script>
body>
html>

8 非父子组件通信

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>创建同级组件通信的复合组件title>
    script src="https://unpkg.com/vue/dist/vue.js">script>
head>
body>
    
    div id="demo">
        a-component>a-component>
        b-component>b-component>
    div>
    script>
//        创建一个空的Vue实例作为中央事件总线。
        var bus = new Vue();
        //创建组件a
        Vue.component("a-component",{
            template:"",
            methods:{
                addNum:function(){//触发a组件的事件
                    bus.$emit("addNum");
                }
            }
        })
//        创建组件b
        Vue.component("b-component",{
            template:"{{num}}",
            data:function(){
                return {
                    num:0
                }
            },
            mounted:function(){//在组件b创建的钩子中监听事件
                var _this = this;//引用this就会变成子方法控制的对象，如果需要上级的对像，在没有参数的情况下，前面前提做了一个临时变量_this，可以保存上级对像，子方法中就可以用_this来调用了
                bus.$on("addNum",function(){
                    _this.num++;
                })
            }
        })
        //创建vue实例
        new Vue({
            el:"#demo"
        })
    script>
body>
html>

vue.js 创建组件子父通信父子通信非父子通信

标签：color doctype second utf-8 属性绑定特定 event 控制

原文地址：http://www.cnblogs.com/iwebkit/p/7142472.html

上一篇：浅谈计数排序

下一篇：webpack 学习

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：vue.js 创建组件子父通信父子通信非父子通信
文章链接：http://soscw.com/essay/98995.html

亲，登录后才可以留言！

vue.js 创建组件子父通信父子通信非父子通信

评论

热门文章

推荐文章

最新文章

置顶文章

vue.js 创建组件 子父通信 父子通信 非父子通信

评论

热门文章

推荐文章

最新文章

置顶文章

vue.js 创建组件子父通信父子通信非父子通信