飞利浦·斯塔克|Vue子组件向父组件传参(事件传参)( 二 )

)</script>

示例结果

子组件通过自定义事件改变父组件数据.png
最后父组件数据一变子组件显示结果自然变化
我们也知道$emit方法在触发自定义事件的时候还可以给自定义事件传参这样就可以实现子组件像父组件传参
3. 子组件向父组件传参上一小节我们是在子组件中通过自定义事件触发父组件中的函数在父组件中修改数据
同样我们也可以在子组件中修改数据然后将修改后的数据通过自定义事件传参的方式传递给父组件函数在父组件函数中直接用子组件传过来修改后的数据直接替换父组件中的数据
示例代码如下:
【飞利浦·斯塔克|Vue子组件向父组件传参(事件传参)】<div id=\"app\">


<my-component
:clicks=\"clicks\"
@count=\"handleParentClick\"
></my-component></div><template id=\"MyComponent\">
<div>
被点击了{{clicks次 
<button @click=\"handleClick\">点击</button>
</div></template><script>

// 组件选项对象
let MyComponent = {
props:[\"clicks\"

template: `#MyComponent`
data(){
return {
count: this.clicks

methods:{
handleClick(){
// 2.子子组件函数中触发自定义事件
// 2.1 在触发自定义事件的时候向自定事件传参
this.count+=2
this.$emit(\"count\"this.count)

// 实例中注册组件
const vm = new Vue({
el:\"#app\"
data: {
clicks:0

components: {
\"MyComponent\": MyComponent
methods:{
handleParentClick(count){
// 4. 在父组件函数中修改父组件中的数据
// 4.1 接受自定义事件触发时传递的参数
console.log(count)
this.clicks = count

)</script>