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数组中的 ...
随机推荐
- 『ACM C++』 Codeforces | 1066B - Heaters
今日不写日感,直接扔上今日兴趣点: 新研究称火星曾经有一个巨大的地下水系统 链接:https://mbd.baidu.com/newspage/data/landingsuper?context=%7 ...
- Python 3 字符串转MD5形式
Python 字符串转MD5: def getStrAsMD5(parmStr): #1.参数必须是utf8 #2.python3所有字符都是unicode形式,已经不存在unicode关键字 #3. ...
- Sass变量及嵌套
1. 变量:SASS允许使用变量,所有变量以$开头. 变量声明:$highlight-color: #000; 注意:变量可以在css规则块定义之外存在.如下例子: $nav-color: #F90; ...
- openstack之kvm常用操作
KVM虚拟机的管理主要是通过virsh命令对虚拟机进行管理. 1. 查看KVM虚拟机配置文件及运行状态 KVM虚拟机默认配置文件位置: /etc/libvirt/qemu/ autostart目录 ...
- python爬虫学习笔记（1）
一.请求一个网页内容打印 爬取某个网页: from urllib import request # 需要爬取的网页 url = "https://mbd.baidu.com/newspage ...
- [Java]Java 9运行Spring Boot项目报错的解决办法
简介 为了学习和尽快掌握 Java 9 的模块化(Module System)新特性,最近安装了 JDK 9,新建了一个 Spring Boot 进行尝试, 过程中遇到了一下报错问题,写下此文谨作为个 ...
- Flask之Flask实例有哪些参数
常用的参数应用实例 from flask import Flask, render_template, url_for, session, request, redirect app = Flask( ...
- pip快速git项目安装
pip install git+https://github.com/xx/xx.git
- PAT (Basic Level) Practice 1008 数组元素循环右移问题
个人练习 一个数组A中存有N(>)个整数,在不允许使用另外数组的前提下,将每个整数循环向右移M(≥)个位置,即将A中的数据由(A0A1⋯AN−1)变换为(AN−M⋯AN ...
- 【HDOJ-1081】To The Max（动态规划）
To the Max Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Problem ...