100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > vuejs 传参 向 子组件 父组件_VUe.js 父组件向子组件中传值及方法

vuejs 传参 向 子组件 父组件_VUe.js 父组件向子组件中传值及方法

时间:2020-04-24 08:12:59

相关推荐

vuejs 传参 向 子组件 父组件_VUe.js 父组件向子组件中传值及方法

父组件向子组件中传值

1. Vue实例可以看做是大的组件,那么在其内部定义的私有组件与这个实例之间就出现了父子组件的对应关系。

2. 父子组件在默认的情况下,子组件是无妨访问到父组件中的数据的,所以要想在子组件中使用父组件的数据的时候,就需要以属性绑定的形式,将父组件的数据传递到子组件中。

3. 通过属性绑定传递来的数据无法再子组件中直接使用,需要在props中重新定义以后才可以使用。例:props:['变量名']。props是一个数组。

4. 子组件中的data数据都是私有,子组件可以通过ajax请求到的数据放到data上使用。

5. props:[ ]中的数据都是只读的,不可以进行改变,如果强行改变页面也会显示改变后的效果,但是会有警告。

var vm = new Vue({

el: '#app',

data: {

msg: '这是父组件中的数据----1234'

},

components: {

com1: {

template: '

这是子组件----5678---------{{fudata}}

',

props: ['fudata']

}

},

})

父组件向子组件传递方法

1.子组件要想获得父组件中的方法,需要使用时间绑定机制。

2. 在子组件中要想使用父组件传递过来的方法,需要用到一个新的方法 this.$enit.('方法名')

Document

子组件

var vm = new Vue({

el: '#app',

data: {},

methods: {

show() {

console.log("OK")

}

},

components: {

com1: {

template: '#ttpp',

methods: {

self() {

this.$emit('func');

}

}

},

},

})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。