父向子通信
- 传递:自定义属性(属性名任意,属性值为要传递的数据)
- 接收子组件通过props接收父组件属性
示例代码
<div id="app">
<h1>打个招呼:</h1>
<!--使用子组件,同时传递title属性-->
<introduce title="大家好,我是锋哥"/>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component("introduce",{
// 直接使用props接收到的属性来渲染页面
template:'<h1>{{title}}</h1>',
props:['title'] // 通过props来接收一个父组件传递的属性,props只能是对象或数组
})
var app = new Vue({
el:"#app"
})
</script>
静态绑定
给 prop 传入一个静态的值: 只能是字符串类型
<introduce title="大家好,我是AA"/>
动态绑定
给 prop 传入一个动态的值: (通过v-bind从数据模型中,获取title的值)
<introduce :title="title"/>
props数据校验
当无需数据校验时props可以写为数组,需要数据校验时需要写为对象。
//数组形式 props:['title'] //对象形式 props: { items: { //属性名 type: Array, //属性数据类型 default: [], //属性默认值 required: true //属性是否必须 } }
子向父通信
子组件向父组件通信需要通过调用父组件的函数间接实现对data的影响。vue提供了一个内置的this.$emit()函数,用来调用父组件绑定的函数。
示例
<div id="app"> <h2>num: {{num}}</h2> <counter :count="num" @inc="increment" @dec="decrement"></counter> </div> <script> Vue.component("counter", { template:' <div> <button @click="plus">加</button> <button @click="reduce">减</button> </div>', props:['count'], methods:{ plus(){ this.$emit("inc"); }, reduce(){ this.$emit("dec"); } } }); var app = new Vue({ el:"#app", data:{ num:0 }, methods:{ // 父组件中定义操作num的方法 increment(){ this.num++; }, decrement(){ this.num--; } } }) </script>
在父组件中编写操作父data的函数
var app = new Vue({ el:"#app", data:{ num:0 }, methods:{ // 父组件中定义操作num的方法 increment(){ this.num++; }, decrement(){ this.num--; } } })
把函数绑定到子组件标签上
<div id="app"> <h2>num: {{num}}</h2> <counter :count="num" @inc="increment" @dec="decrement"></counter> </div>
在子组件中编写子组件函数通过this.$emit()函数调用父组件的函数
Vue.component("counter", { template:' <div> <button @click="plus">加</button> <button @click="reduce">减</button> </div>', props:['count'], methods:{ plus(){
//this.$emit("inc",x1,....,x3);其中inc为绑定在子组件标签上的自定义函数名,x1....x3依次为父组件函数所需要的参数 this.$emit("inc"); }, reduce(){ this.$emit("dec"); } } })