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数组中的 ...
随机推荐
- Win10英文系统 JDK1.8安装及环境变量配置
前提 今天换新电脑了,需要重新安装一遍JDK.写个随笔记录一下整个过程. 下载 官网上JDK已经出到10了,但是回忆起JDK9都有各种坑(不支持一些软件),决定还是用JDK8. 下载地址: http: ...
- $.extend() 合并问题
- JS DOM 1
接触JS也有快一个月了,现在来总结一下看过的书,一本本总结,之后再融会贯通,也许更有助于学习.废话不多说,现在看的是<JavaScript DOM编程艺术>,该书挺薄的,不太会望而生畏,( ...
- lamp 安装 apache
lamp安装 httpd-2.2.4.tar.gz :http://download.csdn.net/detail/wulvla020311/8046141 先检查一下装的东西都在不在:rpm -q ...
- VSCode 配置 Python
假设 Anaconda 和 VSCode 都安装好了. 安装插件 VSCode 自带的 python 高亮不是很好,这里我们用 One Dark Pro 插件, 以及安装 Python 插件. 设定 ...
- 指针小白：修改*p与p会对相应的地址的变量产生什么影响？各个变量指针的长度为多少？
这两天敲代码碰到了一个这样的问题 代码如下: #include <stdio.h> #include <stdlib.h> int main() { ; int* p=& ...
- Linux 中的权限
ABCD A-0, 十进制 B-user(u, 用户) C-group(g, 组用户) D-others(o, 其他用户) +-----+---+--------------------------+ ...
- [原创]python写的sniffer
import socket s=socket.socket(socket.PF_PACKET,socket.SOCK_RAW,8) while 1: data=s.recv(65535) print ...
- 一起来写段JS drag代码
http://www.cnblogs.com/275095923/archive/2010/12/09/1901352.html
- WPF Prism MVVM 中 弹出新窗体. 放入用户控件
原文:WPF Prism MVVM 中 弹出新窗体. 放入用户控件 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_37214567/artic ...