Vue 基础组件及通信
2019-08-03 本文已影响1人
CondorHero
一、自定义标签
- 单页面标签，只在当前引入页面有效。
子组件为：HaHa.js
<template>
<div>
<h2>我是子组件哈哈组件</h2>
</div>
</template>
<script>
</script>
<style>
</style>
单页面标签 App.vue 引入
<template>
<div>
<!--自封闭和双标签均可 -->
<xixi/>
<xixi></xixi>
</div>
</template>
<script>
//标签引入
import HaHa from "./components/HaHa";
export default {
// 标签注册
components :{
xixi : HaHa
// 千万不要加引号，一般这里 k:v 一直省略 V
}
}
</script>
<style>
</style>
页面效果
- 首页引入子组件任何地方都可以使用
可以达到天下无人不识君。
import Vue from "vue";
import App from "./App";
// 引入
import HaHa from "./components/HaHa";
// 注册
Vue.component("HaHa",HaHa);
new Vue({
el : "#app",
render(h){
return h(App)
}
});
二、儿子读取父标签属性
<template>
<div>
<!--自封闭和双标签均可 -->
<HaHa info = "我是父标签的自定义属性"></HaHa>
</div>
</template>
<script>
//标签引入
import HaHa from "./components/HaHa";
export default {
// 标签注册
components :{
HaHa
}
}
</script>
<style>
</style>
<template>
<div>
<h2>我是子组件哈哈组件</h2>
<p>{{info}}</p>
</div>
</template>
<script>
export default {
props : ["info"]
}
</script>
<style>
</style>
三、父子标签之间双向通信
- 对象法
父子之间传递的参数如果不是引用类型，儿子只读，无权改变，但是传入引用类型的标签儿子可以改变。这与 react 不同，react 任何情况下不能改变父标签传来的参数。
HaHa.vue 子组件
<template>
<div>
<h2>我是子组件哈哈组件</h2>
<p>{{info.value}}</p>
<p><button @click = "add">子组件改变数值</button></p>
</div>
</template>
<script>
export default {
props : ["info"],
methods : {
add(){
this.info.value--
}
}
}
</script>
<style>
</style>
<template>
<div>
<!--自封闭和双标签均可 -->
<HaHa :info = "n"></HaHa>
<button @click = "add">父组件改变info的数值</button>
</div>
</template>
<script>
//标签引入
import HaHa from "./components/HaHa";
export default {
data(){
return {
n : {value:10}
}
},
// 标签注册
components :{
HaHa
},
methods : {
add(){
this.n.value++
}
}
}
</script>
<style>
</style>
父子之间的双向通信.gif
- 函数法
HaHa.vue 子组件
<template>
<div>
<textarea cols = "50" rows = "10" ref = "send" @input = "add" :value="content" placeholder="请输入..."></textarea>
<button @click = "clear">点我清空</button>
</div>
</template>
<script>
export default {
data(){
return {
content : ""
}
},
props:["info"],
methods :{
add(){
thisdd.info(this.$refs.send.value)
this.content = this.$refs.send.value;
},
clear(){
this.content = "";
this.info(null)
}
}
}
</script>
<style>
</style>
父组件App.vue
<template>
<div>
<HaHa :info = "add"></HaHa>
<p>{{info}}</p>
</div>
</template>
<script>
import HaHa from "./components/HaHa";
export default {
components : {
HaHa
},
data(){
return {
info : null
}
},
props:[],
methods:{
add(str){
this.info = str;
}
}
}
</script>
<style>
p {
width: 400px;
height: 200px;
background-color: #fcf;
}
</style>
实时输入.gif
- 内置函数法
内置函数方法一共有两种。
- 事件监听
父组件 App.vue
<template>
<div>
<HaHa></HaHa>
<p>{{info}}</p>
</div>
</template>
<script>
import HaHa from "./components/HaHa";
export default {
components : {
HaHa
},
data(){
return {
info : null
}
},
props:[],
methods:{
// add(str){
// this.info = str;
// }
},
// 父组件在mounted生命周期进行监听
mounted(){
// 通过这 $on来监听接收
this.$on("info",function(str){
this.info = str;
})
}
}
</script>
<style>
p {
width: 400px;
height: 200px;
background-color: #fcf;
}
</style>
子组件 HaHa.vue
<template>
<div>
<textarea cols = "50" rows = "10" ref = "send" @input = "add" :value="content" placeholder="请输入..."></textarea>
<button @click = "clear">点我清空</button>
</div>
</template>
<script>
export default {
data(){
return {
content : ""
}
},
methods :{
add(){
// 子组件通过$pacrent 进行发送
this.$parent.$emit("info",this.$refs.send.value)
this.content = this.$refs.send.value;
},
clear(){
this.content = "";
this.$parent.$emit("info",null)
}
}
}
</script>
<style>
</style>
- 行内监听
子组件 HaHa.vue 发送
this.$emit("info",this.$refs.send.value)
- 父组件 App.vue 通过 @info 接收
<HaHa @info = "add"></HaHa>//监听接收完成，触发 add 事件
四、兄弟标签之间的通信
兄弟标签之间的通信借用第三方，对这个第三方的要求很简单，保证借用它的标签的数据能实时更新，满足这个的只有 Vue 实例，完成这个过程的就是江湖人称的 bus。
- 中介者法
现在我们需要 HaHa 和 XiXi 之间进行通信，这时的有一个第三方来完成，我们新建一个bus.js看清是 JS 文件，输入：
import Vue from "vue";
export default new Vue({
data : {
a : 100
},
methods : {
add(){
this.a++;
}
}
})
bus.js 文件定义了一个方法，并设置了一个参数。
接下来以 HaHa.vue 文件为例子：
<template>
<div>
<h3>我是哈哈{{a}}</h3>
<button @click = "add">按我加加</button>
</div>
</template>
<script>
import bus from "./bus.js";
export default {
// 代理函数不能写在methods里面虽然不报错，但是也不更新
methods : {
add(){
bus.add();
}
},
//computed用来接收
computed:{
a(){
return bus.a
}
}
}
</script>
<style>
</style>
里面的 computed 是用来接收的，指定接受的 a 函数，就是用来插入的，也可以用 methods 来接收但是插进入的方法就变了，必须的这样写 {{a()}} 。切记不能用 data 来接收。
在 XIXi 里面同样引入。得出如下结果：
bus.gif
- 原型法通信
打开 main.js ，让暴露出来的 bus 绑定在 Vue 的身上。
import Vue from "vue";
import App from "./App";
import bus from "./components/bus.js"
Vue.prototype.$bus = bus;
new Vue({
el : "#app",
render(h){
return h(App)
}
});
这时就可以在任意子文件下访问了。其实就是给 Vue 绑定了一个原型对象。
<template>
<div>
<h3>我是哈哈{{$bus.a}}</h3>
<button @click = "add">按我加加</button>
</div>
</template>
<script>
export default {
methods : {
add(){
this.$bus.a++
}
}
}
</script>
<style>
</style>
- 插件法
插件法基本思想还是原型法，只不过是使用插件进行引用的。子文件夹里面进行使用和原型法的使用是一模一样的。
我们打开 main.js 修改：
import Vue from "vue";
import App from "./App";
import bus from "./components/bus.js"
// use 使用插件
Vue.use(bus);
new Vue({
el : "#app",
render(h){
return h(App)
}
});
这时的进入 bus.js 修改使用方法了。
import Vue from "vue";
export default {
install(Vue){
Vue.prototype.$bus = new Vue({
data : {
a : 100
},
methods : {
add(){
this.a++;
}
}
})
}
}
Vue.use() 里面是个对象，对象必须有 install 方法，这个方法的参数由系统提供 Vue，不过仔细看思想是不是和原型法一模一样只不过，使用插件引用 的方法进行原型绑定的。
