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数组中的 ...
随机推荐
- js实现点击按钮可实现编辑
<script type="text/javascript">//修改密码//抓取到的数据 function edit() { document.getElementB ...
- 关于document.write()加载JS等静态资源 和 异步async加载JS
现流行浏览器对于静态资源的预加载 传统的浏览器,对于静态资源加载,会阻塞 HTML 解析器的线程进行,无论内联还是外链. 例如: <script src="test1.js" ...
- 关于secureCRT的安装
原文地址:https://www.cnblogs.com/yjd_hycf_space/p/7729796.html 安装该楼主的方式基本可以破解: 踩坑事项:1)可以选择自定义安装:然后将注册机复制 ...
- JavaScript深入之参数按值传递
在<JavaScript高级程序设计>第三版 4.1.3,讲到传递参数: ECMAscript中所有函数的参数都是按值传递 按值传递 也就是,把函数外部的值复制给函数内部的参数,就和把值从 ...
- es6 Proxy对象详解
Proxy用于修改某些操作的默认行为,也可以理解为在目标对象之前架设一层拦截,外部所有的访问都必须先通过这层拦截,因此提供了一种机制,可以对外部的访问进行过滤和修改.这个词的原理为代理,在这里可以表示 ...
- YII2.0 后台手动添加用户功能
后台添加管理员用户使用SignupForm类实现 步骤一.复制一份前台frontend/models/SignupForm.php 到后台模型文件夹中 backend/models/SignupFor ...
- mysql的length与char_length的区别
length: 是计算字段的长度一个汉字是算三个字符,一个数字或字母算一个字符 char_length:不管汉字还是数字或者是字母都算是一个字符 同时这两个函数,可用于判断数据中是否有中文文字 例 ...
- 在树莓派上用 python 做一个炫酷的天气预报
教大家如何在树莓派上自己动手做一个天气预报.此次教程需要大家有一定的python 基础,没有也没关系,文末我会放出我已写好的代码供大家下载. 首先在开始之前 需要申请高德地图API,去高德地图官网注册 ...
- Golang通道的无阻塞读写的方法示例
无论是无缓冲通道,还是有缓冲通道,都存在阻塞的情况,但其实有些情况,我们并不想读数据或者写数据阻塞在那里,有1个唯一的解决办法,那就是使用select结构. 这篇文章会介绍,哪些情况会存在阻塞,以及如 ...
- C# set 跟 get
可以在类里面 private string name; public string Name { get { return name; } set { name = value; } }