1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue组件获取props_vue组件之属性Props

vue组件获取props_vue组件之属性Props

时间:2024-02-20 13:30:32

相关推荐

vue组件获取props_vue组件之属性Props

组件的属性和事件

父子组件之间的通信

父子组件之间的通信就是 props down,events up,父组件通过 属性props向下传递数据给子组件,子组件通过 事件events 给父组件发送消息。

比如,子组件需要某个数据,就在内部定义一个prop属性,然后父组件就像给html元素指定特性值一样,把自己的data属性传递给子组件的这个属性。

而当子组件内部发生了什么事情的时候,就通过自定义事件来把这个事情涉及到的数据暴露出来,供父组件处理。

如上代码,

foo是组件内部定义的一个prop属性,baz是父组件的一个data属性,

event-a是子组件定义的一个事件,doThis是父组件的一个方法

过程就是这样:

父组件把baz数据通过prop传递给子组件的foo;

子组件内部得到foo的值,就可以进行相应的操作;

当子组件内部发生了一些变化,希望父组件能知道时,就利用代码触发event-a事件,把一些数据发送出去

父组件把这个事件处理器绑定为doThis方法,子组件发送的数据,就作为doThis方法的参数被传进来

然后父组件就可以根据这些数据,进行相应的操作

属性Props

Vue组件通过props属性来声明一个自己的属性,然后父组件就可以往里面传递数据。

ponent(mycomponent,{

template:

这是一个自定义组件,父组件传给我的内容是:{{myMessage}} ,

props: [myMessage],

data () {

return {

message: hello world

}

}

})

然后调用该组件

注意,由于HTML特性是不区分大小写的,所以传递属性值时,myMessage应该转换成 kebab-case (短横线隔开式)my-message="hello"。

v-bind绑定属性值

v-bind

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