vue 父子之间的传值 父传子 props 子传父

 

将根组件和子组件渲染在视图层，

    

<div id="app">

<!-- 在声明的子组件视图层后加上ref -->

<child1 ref="aaa"></child1>

<child2 ref="bbb"></child2>

</div>

<template id="child1">

<div>

<h1>子组件1</h1>

</div>

</template>

 

<template id="child2">

<div>

<h1>子组件2</h1>

</div>

</template>

在根组件中把子组件声明好

<script src="./js/vue.js"></script>

<script>

// 子组件

let child1 = {

template: `#child1`,

}

let child2 = {

template: `#child2`,

}

// 根组件

let a = new Vue({

el: "#app",

data: {

},

methods: {

},

components: {

child1,

child2

}

})

</script>

在根组件数据中心添加数据，

在根组件中mounted（）  dom挂载之后 去获取子组件身上带有ref属性的数据

<script src="./js/vue.js"></script>

<script>

// 子组件

let child1 = {

template: `#child1`,

data() {

return {

msg: "哈哈",

data: new Date()

}

}

}

let child2 = {

template: `#child2`,

data() {

return {

num: 100,

}

},

computed: {

add() {

return this.num * 10

}

}

}

// 根组件

let a = new Vue({

el: "#app",

data: {

},

mounted() {

//父组件访问子组件

 

console.log(this.$refs);

// 获取ref="aaa"这个子组件数据中心data的数据

console.log(this.$refs.aaa.msg);

console.log(this.$refs.aaa.data);

// 获取ref="bbb"这个子组件计算中心computed的数据

console.log(this.$refs.bbb.add);

},

methods: {

},

components: {

child1,

child2

}

})

</script>