前端-vue父子组件
一、父子组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<mycomponent></mycomponent>
</div>
<template id="mytemplate">
<div>
<h1>这是父组件的h1标签</h1>
<!-- 在父组件中使用子组件 -->
<subcomponents></subcomponents>
</div>
</template>
</body>
<script>
let obj = {
template : '#mytemplate',
data() {
return {
welcome : 'hello'
}
},
// 在父组件里声明一个组件集合，那么这个组件集合里的所有组件就都是子组件了
components : {
subcomponents : {
template : `<div>这是一个子组件</div>`
}
}
}
let app = new Vue({
el : '#app',
components : {
mycomponent : obj
}
})
</script>
</html>
1.父传子
1.1第一种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<mycomponent></mycomponent>
</div>
<template id="mytemplate">
<div>
<h1>这是父组件的h1标签</h1>
<!-- 在父组件中使用子组件 -->
<!-- 父组件向子组件传值方法1 -->
<!--
步骤：
1.在子组件的标签中，声明一个属性，属性值即为父组件向子组件传递的值
2.在子组件中，使用props，声明接受父组件向子组件传递的载体
3.子组件就可以使用这个属性获取父组件向子组件传递的值了
-->
<subcomponents msg="hello world"></subcomponents>
</div>
</template>
</body>
<script>
let obj = {
template : '#mytemplate',
data() {
return {
welcome : 'hello'
}
},
// 在父组件里声明一个组件集合，那么这个组件集合里的所有组件就都是子组件了
components : {
subcomponents : {
template : `<div>这是一个子组件，用来接收父组件传过来的值：{{ msg }} </div>`,
props : ['msg']
}
}
}
let app = new Vue({
el : '#app',
components : {
mycomponent : obj
}
})
</script>
</html>
1.2第二种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<mycomponent></mycomponent>
</div>
<template id="mytemplate">
<div>
<h1>这是父组件的h1标签</h1>
<!-- 在父组件中使用子组件 -->
<!-- 父组件向子组件传值方法2 -->
<!-- 使用v-bind绑定子组件标签属性 -->
<subcomponents :msg="welcome"></subcomponents>
</div>
</template>
</body>
<script>
let obj = {
template : '#mytemplate',
data() {
return {
welcome : 'hello'
}
},
// 在父组件里声明一个组件集合，那么这个组件集合里的所有组件就都是子组件了
components : {
subcomponents : {
template : `<div>这是一个子组件，用来接收父组件传过来的值： {{msg}} </div>`,
props : ['msg']
}
}
}
let app = new Vue({
el : '#app',
components : {
mycomponent : obj
}
})
</script>
</html>
2.子传父
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<mycomponent></mycomponent>
</div>
<template id="mytemplate">
<div>
<h1>这是父组件的h1标签,用来接收子组件传过来的数据： {{msg}} </h1>
<!-- 在父组件中使用子组件 -->
<!-- 子组件向父组件传值步骤：
1.需要在子组件中触发一个发送数据的事件，这里采用点击事件（send）
2.在点击事件里使用send方法，使用emit接收2个参数，传递数据的事件和需要传递的参数（事件是自定义的）
3.在父组件里引用子组件，并在引用的子组件中使用on监听上一步传递数据的事件
4.在父组件中使用这个事件，有一个参数，就是从子组件中发送过来的数据
-->
<subcomponents @childmsg="get"></subcomponents>
</div>
</template>
</body>
<script>
let obj = {
template: '#mytemplate',
data() {
return {
msg: ''
}
},
methods: {
get(msg) {
this.msg = msg
}
},
// 在父组件里声明一个组件集合，那么这个组件集合里的所有组件就都是子组件了
components: {
subcomponents: {
template: `<div>这是一个子组件。
<input type='button' value='给父组件发送数据' @click='send'>
</div>
`,
data() {
return {
message: '这是子组件向父组件发送的数据'
}
},
methods: {
send() {
// 传递数据的事件和需要传递的参数
this.$emit('childmsg', this.message)
}
},
},
}
}
let app = new Vue({
el: '#app',
components: {
mycomponent: obj
}
})
</script>
</html>
3.非父子组件传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<!-- 流程：给组件二点击事件生成随机数发给组件一 -->
<com1></com1>
<com2></com2>
</div>
</body>
<script>
// 非父子组件传值
// 1.创建一个空的vue作为中间件，来处理非父子组件之间的传值
var bus = new Vue()
Vue.component('com1',{
template : `<div>这是组件一，现在用来接收组件二发过来的值：{{count}} </div>`,
data() {
return {
count : 0
}
},
// 组件创建完成时，会自动执行该函数，数据请求放在这里
created() {
let $this = this
// 3.在回调函数中，用value接收传过来的数据
bus.$on('jianting',function(value){
$this.count = value
})
},
})
Vue.component('com2',{
template : `<div>这是组件二，现在给组件一发送数据 <button @click='add'>发送</button> </div>`,
data() {
return {
}
},
methods: {
add(){
// 生成一个随机数
var ran = Math.floor(Math.random() * 10)
console.log(ran)
// 2.发射事件，将随机数传递出去
bus.$emit('jianting',ran)
}
},
})
let app = new Vue({
el : '#app'
})
</script>
</html>
本文含有隐藏内容，请 开通VIP 后查看