定义全局组件
Vue.component('组件名',{
props:[], //接收父组件的传参
template: '组件模版' // 这里可以字符串拼接html代码, 也可在Vue挂载点外面定义 <template id="tmp"></template>, 传入 "#tmp" 即可
})
定义局部组件
var myapp = new Vue({
el:'#app',
data:{ },
methods:{ },
//定义局部组件
components:{
"list-item":{ //组件名
props:["content"], //接收父组件的传参
template: "<li>{{content}}</li>",
}
}
});
父子组件传值
父传子 props 通过属性绑定的形式, 将 home 传递给子组件 :title="'home'" 子组件通过 props: ['title'] 取到参数
子传父 $emit @parentfun="alertContent" 通过@将父组件的方法传递给子组件, 子组件接收 this.$emit('parentfun', 子组件给父组件的参数 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<title>Vuetest</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 传递 title 给 apphead 组件, 'home'表示是字符串,不然的话会当做变量在 data 里面找 -->
<apphead :title="'home'"></apphead>
<ul>
<list-item v-for='(item, index) in lists' :key='index'
:content="item" @parentfun="alertContent"></list-item>
<!-- @parentfun="alertContent" 监听子组件的 parentfun 事件
也可理解为将 alertContent 方法传给子组件 -->
</ul>
</div>
<!-- 使用 template 定义组件模版是必须放在 vue 控制区域的外部 -->
<template id="head">
<div>{{title}}</div>
</template>
<script>
// 定义全局组件
Vue.component("apphead",{
props: ['title'], // 父组件的传参
template: '#head', // 组件模版
})
var myapp = new Vue({
el:'#app',
data:{
lists: ["tom", "jon", "luck"]
},
methods:{
alertContent(content) {
alert(content);
}
},
//定义局部组件
components:{
"list-item":{
props:["content"],
template: "<li @click='handcilck'>{{content}}</li>",
methods: {
handcilck(){
// 调用父组件方法,并传入参数 --- 子组件向父组件传值
this.$emit('parentfun', this.content)
}
}
}
}
});
</script>
</body>
</html>
父子组件通信之 ref / $parent / $children
ref 是被用来给元素或子组件注册引用信息的, 引用信息将会注册在父组件的 $refs 对象上
- 如果ref用在子组件上, 指向的是组件实例, 可以理解为对子组件的索引, 通过 $ref 可获取到子组件里的属性和方法
- 如果ref在普通的 DOM 元素上使用, 引用指向的就是 DOM 元素, 通过 $ref 可获取到该 DOM 的属性集合
$parent 在子组件内部可以通过 this.$parent 获得父组件的实例
$children 返回的是一个字组件集合, 如果你清楚的知道子组件的顺序,可以使用下标来操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<title>Vuetest</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- ref 1.调用子组件时 给子组件加上 ref 属性 -->
<chile ref="msg"></chile>
<input type="button" value="调用子组件的方法" @click="getChild" >
</div>
<template id="head">
<div @click="getparent">我是子组件</div>
</template>
<script>
// 定义子组件
Vue.component("chile",{
props: ['title'],
template: '#head',
methods: {
showmsg(){
alert("我是子组件的方法")
},
getparent(){
// 子组件通过调用 this.$parent 可以获得父组件的实例
console.log(this.$parent)
this.$parent.showmsg()
}
}
})
var myapp = new Vue({
el:'#app',
data:{ },
methods:{
getChild() {
// ref 2. 通过 this.$refs.msg 可以获取子组件的实例
this.$refs.msg.showmsg()
// 也可直接通过 this.$children 获得子组件集合
// this.$children[0].showmsg()
},
showmsg(){
alert("我是父组件的方法")
},
}
});
</script>
</body>
</html>