引入组件方式
1、全局引入
在main.js文件中引入并且注册
import ChildrenDemo from '@/views/components/ChildrenDemo'
Vue.component('ChildrenDemo',ChildrenDemo)// 第一个参数 全局组件的名字(字符串类型),第二个参数:引入的组件名(一般都与组件名保持一致)
2、局部引入(那里需要往哪里搬)
在需要的父组件中引入 并且使用
//使用组件
<ChildrenDemo></ChildrenDemo>
<!-- 或 -->
<children-demo></children-demo>
//导入文件
import ChildrenDemo from '@/views/components/ChildrenDemo'
//注册组件
export default {
components: {
ChildrenDemo
},
}
一、父组件向子组件传值
在子组件 prop 中可以注册一些自定义组件属性,父组件调用子组件时可以向 prop 中的自定义属性传值。
父组件代码
<template>
<div class="parent">
<ChildrenDemo :title="向子组件传递的title值"></ChildrenDemo>
</div>
</template>
子组件代码(通过props接收父组件传过来的值)
<template>
<div class="ChildrenDemo">
<h1>{{title}}</h1>
</div>
</template>
<script>
export default {
name: 'ChildrenDemo',
props:['title'],
components: {
},
data () {
return {
}
}
}
</script>
props的更多写法
1、字符串数组形式
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
2、指定prop值类型
export default {
props: {
title: {
type: Object, //类型
required: true,//是否必须
default: {} //默认值
}
},
}
二、子组件向父组件传值
通过 vue 实例方法 vm.$emit
子组件可以自定义一个事件提交给父组件,触发父组件的方法,父组件通过监听子组件的自定义事件可以接收子组件传递的数据。
子组件
<template>
<div class="ChildrenDemo">
<h1>子组件</h1>
<button @click="changeParentTitle">点击更改父组件title</button>
</div>
</template>
<script>
export default {
components: {},
data() {
return {};
},
methods: {
changeParentTitle() {
this.$emit("childEvent", "子组件传给父组件的title")//第一个参数是提交的事件名,后面的参数可以是多个需要传递给父组件的参数
}
}
};
</script>
父组件
<template>
<div class="home">
<h1>父组件title值:{{ title }}</h1>
<ChildrenDemo :title="title" @childEvent="changeTitle"></ChildrenDemo>
</div>
</template>
<script>
import ChildrenDemo from "@/views/components/ChildrenDemo";
export default {
components: {
ChildrenDemo,
},
data() {
return {
title: "My Journey with Vue"
};
},
methods: {
changeTitle: function (str) {
this.title = str
},
},
};
</script>
三、使用 $refs (父组件访问子组件的数据和方法)
父组件
<template>
<div class="home">
<h1>父组件title值:{{ title }}</h1>
<ChildrenDemo :title="title" @childEvent="changeTitle" ref="ChildrenDemo"></ChildrenDemo>
<buttom @click="btn">点击按钮</buttom>
</div>
</template>
<script>
import ChildrenDemo from "@/views/components/ChildrenDemo";
export default {
components: {
ChildrenDemo,
},
data() {
return {
title: "My Journey with Vue"
};
},
methods: {
changeTitle: function (str) {
this.title = str
},
//调用子组件的方法
btn(){
this.$refs.ChildrenDemo.change
}
},
};
</script>
子组件只需要有这个change 方法就可以被调用
注意:
1、$refs 只会在组件渲染完成之后生效,并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。
2、由于ref 需要在dom渲染完成后才会有,在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用,或者在 this.$nextTick(()=>{}) 中调用。
四、使用$parent(子组件访问父组件的数据和方法)
<button @click="getParentData">点击获取父组件数据</button>
getParentData(){
let parent = this.$parent //获取父组件实例
console.log(parent.parentValue) //访问父组件属性
parent.parentFn() //调用父组件的方法parentFn()
}