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>
vue.js 创建组件 子父通信 父子通信 非父子通信的更多相关文章
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- Vue.js之组件传值
Vue.js之组件传值 属性传值可以从父组件到子组件,也可以从子组件到父组件. 这里讲一下从父组件到子组件的传值 还以上次的demo为例,demo里有APP.vue是父组件,Header.vue,Us ...
- vue.js 中组件的使用
Vue中组件的使用 方式一 1.使用Vue.extend创建组件 var com1 = Vue.extend({ template: '<h3>这是使用 Vue.extend 创建的组件& ...
- Vue.js多重组件嵌套
Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...
- Vue之创建组件之配置路由!
Vue之创建组件之配置路由!== 第一步: 当然就是在我们的试图文件夹[views]新建一个文件夹比如home 在home文件夹下面新建一个文件index.vue 第二步:在router目录下做如下事 ...
- Vue.js之组件嵌套小demo
Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...
- Vue.js之组件嵌套
Vue.js中组件嵌套有两种方式 第一种:注册全局组件 例如在components文件夹下新建一个User.vue组件,然后在main.js文件中注册全局组件 //注册全局组件 Vue.compone ...
- vue.js 同级组件之间的值传递方法(uni-app通用)
vue.js 兄弟组件之间的值传递方法 https://blog.csdn.net/jingtian678/article/details/81634149
- vue.js（18）--父组件向子组件传值
子组件是不能直接使用父组件中数据的,需要进行属性绑定(v-bind:自定义属性名=“msg”),绑定后需要在子组件中使用props[‘自定义属性名’]数组来定义父组件的自定义名称. props数组中的 ...
随机推荐
- H5输入框在输入信息的时候 页面会变形 并且在页面不变形的时候 键盘会遮挡 输入框的解决办法
$(document).ready(function () { $('body').css({'height':$(window).height()})});//这行是解决输入框在输入信息弹出键盘后页 ...
- STL笔记
STL的基本概念: 1-容器:是可容纳各种类型的数据结构,是 类模板. 2-迭代器:是用于依次存放容器中的元素,类似指针. 3-算法: 是用于操作容器中元素的 函数模板. sort() 用来对 vec ...
- 免安装版MySQL8数据库的安装
[环境准备] PC版本:Windows10企业版.64位操作系统 数据库:MySQL8.0.12-win64.zip免安装版 [彻底卸载已安装的MySQL数据库] 由于系统中MySQL数据库的卸载不彻 ...
- mysql alter 增加修改表结构及约束
1) 加索引,添加时若未指定索引名,默认为字段名 mysql> alter table 表名 add index 索引名 (字段名1[,字段名2 …]); 例子: mysql> alt ...
- Linux下Git远程仓库的使用详解
Git远程仓库Github 提示:Github网站作为远程代码仓库时的操作和本地代码仓库一样的,只是仓库位置不同而已! 准备Git源代码仓库 https://github.com/ 准备经理的文件 D ...
- MQTT的学习之Mosquitto安装&使用（1）
Mosquitto是一个实现了MQTT3.1协议的代理服务器,由MQTT协议创始人之一的Andy Stanford-Clark开发,它为我们提供了非常棒的轻量级数据交换的解决方案.本文的主旨在于记录M ...
- Docker入门系列02
上篇用一个简单的示例,简单的介绍了 Dockerfile 的配置及其相关的命令.这一篇会在上篇的示例程序里,继续添加新代码及如何将单元测试也放入 Image 建立过程内. 首先,我们需要建一个新的类库 ...
- golang 协程嵌套，会产生依赖关系(父子关系)么？
编码时冒出一个问题:在一个协程内部,再创建一个或多个协程,是否会产生依赖关系? 做了一个小实验,这里随笔记录一下经过,备注后续深入研究. test代码: package main import ( & ...
- Java设计模式（8）——结构型模式之组合模式（Composite）
一.概述 定义 将对象以树形结构组织起来,以达成“部分-整体” 的层次结构,使得客户端对单个对象和组合对象的使用具有一致性. 简图 角色——对应上图中顶点为Component,左边为Leaf,右边为C ...
- Java设计模式（6）——创建型模式之原型模式（Prototype）
一.概述 概念 // 引用自<Java与模式> UML图 第二种:登记式 二.实践 先导知识 对象的拷贝: 直接赋值:此时只是相当于a1,a2指向同一个对象,无论哪一个操作的都是同一个对象 ...