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

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>
<!--
    需求：创建一个组件，显示"这是一个组件"。
    思路：调用Vue.extend方法和Vue.component方法。
    步骤： 1.在html创建一个<my-component/>组件。
           2.调用Vue.extend(),将要显示的元素模板赋给template属性，并将整个方法赋给myComponent。
           3.调用Vue.component(),将my-component与myComponent关联。
           4.创建一个Vue的实例。
-->
    <div id="demo">
        <!--html组件的命名必须是字母小写，每个单词用-分割进行语义区分，如list-head-component,这是为了与react区别。-->
        <my-component></my-component>
    </div>
    <script>
        var myComponent=Vue.extend({
            template:"<div>这是一个组件</div>"
        });
        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>
    <!--
        需求：创建一个简写的组件。
        思路：将Vue.extend方法省略，在Vue.component的第二个参数上用一个对象代替Vue.extend方法。
    -->
    <div id="demo">
        <my-component></my-component>
    </div>
    <script>
        Vue.component("my-component",{
            template:"<div>这是一个简写组件</div>"
        });
        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>
    <!--
        需求：创建一个复合组件，在父组件中显示"我有一个子组件"，在子组件中显示"我是子组件"。
        思路：创建一个子组件和一个父组件，在父组件的components属性中进行子组件的关联，然后在data属性中设置显示"我有一个子组件"。
    -->
    <div id="demo">
        <parent-component></parent-component>
    </div>
    <script>
        //创建一个子组件
        var Child=Vue.component("child-component",{
            template:"<div>我是子组件</div>"
        });
        //创建一个父组件
        Vue.component("parent-component",{
            template:"<div>{{message}}<child-component></child-component></div>", //注意元素模板只能有一个最上层元素，也就是用一个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>
<!--
    需求：创建一个最简单的动态组件,点击按钮切换组件。
    思路：用vue的特定的<component></component>元素，动态的绑定is属性，使得多个组件在同一挂载点，实现某一组件的显示或隐藏等等,keep-alive用于缓存，防止多次渲染。
-->
    <div id="demo">
         <!--keep-alive 有俩种属性：include(缓存匹配)，exclude(不缓存匹配的)-->
        <keep-alive include="First,Second,Third">
            <!--注意动态组件必须是component，这是固定的-->
            <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:"<div>first</div>"
                },
                Second:{
                    template:"<div>second</div>"
                },
                Third:{
                    template:"<div>third</div>"
                }
            },
            methods:{
                toggle:function(){
                    var arr = ["First","Second","Third"];
                    var index = arr.indexOf(this.options);
                    this.options = index<2?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>
    <!--
        需求：创建一个复合组件，在父组件中显示"我有一个子组件"，在子组件中显示"我是子组件"。
        思路：创建一个子组件和一个父组件，在父组件的components属性中进行子组件的关联，然后在data属性中设置显示"我有一个子组件"。
    -->
    <div id="demo">
        <parent-component></parent-component>
    </div>
    <script>
        //创建一个子组件
        var Child=Vue.component("child-component",{
            template:"<div>我是子组件</div>"
        });
        //创建一个父组件
        Vue.component("parent-component",{
            template:"<div>{{message}}<child-component></child-component></div>", //注意元素模板只能有一个最上层元素，也就是用一个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>
<!--
    需求：创建一个父组件向子组件通信的复合组件，传递的属性可以再vue实例来动态改变的,比如我们在vm的data中传一个"我是子组件"，然后传给父组件参数，最后在子组件中显示出来。
    思路：1.通过让子组件的props和父组件的props实现连通来达到目的。
-->
    <div id="demo">
        <!-- 当组件接受来自vm的动态数据时，需要用v-bind-->
        <parent-component v-bind:parent_props = "vmData"></parent-component>
    </div>
    <script>
//        创建一个子组件
        var Child = Vue.component("child-component",{
            template:"<div>{{child_props}}</div>",
            props:["child_props"]//子组件props,很奇怪props的属性值不可以用驼峰式，也不能有-，所以我只能用_来将单词分开╮(╯▽╰)╭
        })
//        创建一个父组件
        Vue.component("parent-component",{
            template:"<div>{{msg}}<child-component v-bind:child_props =‘parent_props‘></child-component></div>",//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:"<input type=‘button‘ v-on:click=‘clickEvent‘ value=‘子组件的按钮‘>",
        methods:{
            clickEvent:function(){
                this.$emit("clickEvent");//这里是实现子传父的关键。
            }
        }
    })
    Vue.component("parent-component",{
        template:"<div>父组件的数字:{{num}}<br><child-component v-on:clickEvent=‘parentMethods‘></child-component></div>",
        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>
    <!--
        需求：创建实现非父子组件的兄弟组件,a组件都是按钮，b组件显示数字，当点击a组件时b组件数字增加。
        思路： 1.创建一个空的Vue实例作为中央事件总线。 var bus = new Vue();
               2. 触发a组件的事件 bus.$emit("addNum")；
               3.在组件b创建的钩子中监听事件 bus.$on("addNum",funciton(id){//...})
    -->
    <div id="demo">
        <a-component></a-component>
        <b-component></b-component>
    </div>
    <script>
//        创建一个空的Vue实例作为中央事件总线。
        var bus = new Vue();
        //创建组件a
        Vue.component("a-component",{
            template:"<div><button v-on:click=‘addNum()‘>增加</button></div>",
            methods:{
                addNum:function(){//触发a组件的事件
                    bus.$emit("addNum");
                }
            }
        })
//        创建组件b
        Vue.component("b-component",{
            template:"<div>{{num}}</div>",
            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>
				


				
时间： 2024-11-07 13:53:10 

		


		


	

	
	

		


		
vue.js 创建组件 子父通信 父子通信 非父子通信的相关文章


								

		

			

                Vue.js的组件化思想--下
			

		

		

									

				Vue.js的组件化思想--下 一.组件间的通信        组件实例的作用域是孤立的:这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.但是父子组件之间需要通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件.          在 Vue.js 中,父子组件的关系可以总结为 props down, events up .父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.如下图所示: 二. Prop - 父组件传递数据给子			

		

	

				

		

			

                vue.js之组件
			

		

		

									

				摘要:代码复用一直是软件开发中长期存在的问题,每个开发者都想要再次使用之前写好的代码,又担心引入这段代码后对现有的程序产生影响.现在web Components的出现提供了一种新的思路,可以自定义tag标签,并拥有自身的模板,样式和交互.Vue.js提供了自己的组件系统,支持自定义tag元素和原生HTML元素的扩展 一.基本步骤 1.vue的组件使用有三个步骤:创建组件构造器.注册组件和使用组件 调用Vue.extend({...})创建组件构造器 调用Vue.component()方法注册组件			

		

	

				

		

			

                Vue.js的组件化思想--上
			

		

		

									

				Vue.js的组件化思想--上 一.Vue中的组件 Vue视图层的灵魂 -  组件化 组件(Component)是 Vue.js 最强大的功能之一: 组件可以扩展 HTML 元素,封装可重用的代码: 在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 二.全局组件的创建和注册  全局组件-步骤:1.创建组件Vue.extend(),指定组件的名称--2.注册组件Vue.component()--3.			

		

	

				

		

			

                Vue.js之组件嵌套小demo
			

		

		

									

				Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个组件文件 Header.vue文件: 1 <!--1模板:html结构 --> 2 <template> 3 <header> 4 <h1>{{title}}</h1> 5 </header> 6 </template> 7			

		

	

				

		

			

                Vue.js之组件嵌套
			

		

		

									

				Vue.js中组件嵌套有两种方式 第一种:注册全局组件 例如在components文件夹下新建一个User.vue组件,然后在main.js文件中注册全局组件 1 //注册全局组件 2 Vue.component("users",Users); //前面的users是我们起的名字,后面的Users是我们对应的组件,想要识别这个组件,必须在上面通过import引入, 3 //引入组件 4 import Users from './components/Users' 有了全局组件的话,就可			

		

	

				

		

			

                如何用Express.js &amp; Vue.js 创建一个用比特币支付的在线商店!
			

		

		

									

				#  如何用Express.js & Vue.js 创建一个用比特币支付的在线商店! 如果你想创建一个在线商店,并用比特币等加密货币来支付,那么这里提供了一个很好的解决方案.Express.js是一个轻量级 MVC架构的Web开发框架,适用于Web服务器端开发.Vue.js是一个渐进式的前端开发框架,你可以自由选择需要的模块集成了你的项目中.Mixin Payment是一个开源的,基于Mixin Network开发的加密货币支付方案. ## 准备工作: 先安装以下依赖包!- Go lang  1			

		

	

				

		

			

                87   全局和局部组件, 子父和父子之间的通信 混入 插槽  路飞导航栏
			

		

		

									

				主要内容: 1  全局组件: a : 定义一个全局组件 Vue.component( 'global-component', { template: `<div> 注意: template一定要包一层div <h3>{{wanrong}}</h3> <h2>{{wanrong}}</h2> </div>`, data() { return { wanrong: 'hello', } } } ); 2  全局组件的使用的两种方式: a:			

		

	

				

		

			

                vue.js（18）--父组件向子组件传值
			

		

		

									

				子组件是不能直接使用父组件中数据的,需要进行属性绑定(v-bind:自定义属性名=“msg”),绑定后需要在子组件中使用props[‘自定义属性名’]数组来定义父组件的自定义名称. props数组中的数据是只读的,父组件中的data是可读可写的. 子组件自己的data,子组件可直接访问,与父组件无关. <div class="app"> <mycom1 v-bind:mymsg="msg"></mycom1> <!-- 子组			

		

	

				

		

			

                Vue（5）- 子父级组件之间的数据传递
			

		

		

									

				父组件 向 子组件 传递数据 1 Parent.vue 文件 2 3 <template> 4 <div> 5 <h2>Parent Component</h2> 6 <p> 7 <Child :ParentToChild="ParentToChildMsg" /> 8 </p> 9 </div> 10 </template> 11 12 <script> 13 im