html中js向vue组件传值,Vue 组件之间传值

#同一个路由下，父向子组件传值

props属性 -- 单向绑定

import childOne from '../components/childOne.vue';

export default{

data() {

return{

msg: '我是动态data中的数据！'

}

},

components: {

childOne

}

}

{ { info }}

{ { msg }}

export default{

props: ['info','msg']

}

父组件中

给childOne绑定一个自定义静态prop属性，这里是info

使用v-bind绑定动态prop属性，这里是msg

childOne中，在props中接收传递过来的prop属性，info、msg，可直接使用

props的具体校验规则等，详见：

#同一个路由下，子向父组件传值

使用$emit发送自定义事件

import childOne from '../components/childOne.vue';

export default{

methods:{

/* E */

sendEv(a,b,c) {

console.log(a,b,c);

}

},

components: {

childOne

}

}

按钮

export default{

created() {

//B

this.send()

},

methods:{

send() {

//A

this.$emit('s-send', '来自childOne的消息！', { name: 'Tom' }, [1,2,3,4])

}

}

}

子组件中

首先先有 A ，this.$emit() 这一段代码

何时发给父组件(任选)

① 注释B：在子组件生命周期中发送

② 注释C：在DOM中写一个事件，触发这个事件时发送

父组件中

注释D：使用子组件$emit的自定义事件绑定一个自己的事件，这个是必须的

注释E：methods中的事件参数，可以获取来自子组件传的值

//$emit的使用

this.$emit()

@params

参1：自定义事件名

参2 ~ 参nÿ