不多BB直接上图：如上图：为子组件绑定点击事件如上图：send方法触发父组件绑定的事件 如上图：为父组件绑定触发事件@myEvent="aa"aa方法接受子组件传过来的值原文：http://www.cnblogs.com/dujunfeng/p/7991970.html
Vuex官网地址：https://vuex.vuejs.org/zh/guide/ 步骤一：安装vuex npm install vuex --save 步骤二：简单使用构建核心仓库store.jsVuex 应用的状态 state都应当存放在store.js 里面，Vue 组件可以从 store.js 里面获取状态，可以把 store 通俗的理解为一个全局变量的仓库。但是和单纯的全局变量又有一些区别，主要体现在当 store 中的状态发生改变时，相应的 vue 组件也会得到高效更新src 目录下创建一个 vuex 目录，vuex下创建...
<div id="app"> {{msg}} <logn v-bind:fuzujian="msg" ></logn> app控制的区域为父组件 logn为私有的子组件 </div> <script> var vm = new Vue({ el:"#app", data:{ msg:"这是父组件的内容" }, methods: {}, components:{ data(){ return{ info:"<h1 >这是私有组件的data值</h1>", ...
正常我们给组件注册事件是先在子组件的里面监听事件，然后通过$emit向外层触发给父组件，然后再在父组件中接收事件，这样做有点啰嗦，vue提供了 .native修饰符，我们可以直接在父组件通过 .native修饰符来给子组件注册事件，如下： 原文：https://www.cnblogs.com/lyt0207/p/12103791.html
代码中，Helloword是子组件<template><div class="index"><Header></Header><HelloWorld></HelloWorld><button @click="goPro">跳转</button></div>
</template>
mounted(){console.log(this.$children)
}用ref绑定子组件，在父组件中通过$refs取对应的值或者方法<HelloWorld ref="hello"></HelloWorld>this.$refs.hello.属性
this.$refs.hello.方法 原文：https://www.cnblogs.com/xieoxie3000question/p/13031054.html
第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法父组件<template><div><child></child></div>
</template>
<script>import child from ‘~/components/dam/child‘;export default {components: {child},methods: {fatherMethod() {console.log(‘测试‘);}}};
</script>子组件<template><div><button @click="childMethod()">点击</button></div>
</template>
<script>export default {methods: {childMetho...
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"> <link ...
main.js文件添加如下：new Vue({ router, render: h => h(App),data: { eventHub: new Vue() }}).$mount(‘#app‘); 父组件：监听事件:this.$root.eventHub.$on(‘cart.add‘, (target) => { this._drop(target); });子组件：触发事件：this.$root.eventHub.$emit(‘cart.add‘, event.target); 原文：http://www.cnblogs.com/jhuang-com/p/6810283.html
1.父组件<template><div id="rightmenu8"><rightmenu7 ref="rightmenu7" @child="parent3" :age="age"></rightmenu7> </div></template><script>import rightmenu7 from "./RightMenu7.vue";export default { name: "rightmenu8",data() {return { age:18}},methods: {},components: {rightmenu7: rightmenu7}};</script> 2.子组件
<template><div id="rightmenu7" ></div></template><script>export default {props:[‘age‘...
父组件向子组件传值<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><div id="app"><com1 :parentmsg=‘msg‘></com1><!-- 父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式...
目标:封装一个 搜索组件 <子组件需要传一个或者多个搜索参数到父组件,然后父组件执行列表查询函数>1.子组件1 <div>
2 <input v-model="listQuery.keyword">
3 <span>筛选搜索</span>
4 <el-button @click="search" >查询搜索</el-button>
5 </div>methods: {search(){//this.$emit(‘父组件名称‘,传到父组件的参数);this.$emit(‘searchListZ‘, this.listQuery);this.$parent.getList(...
一个基本的父传子demoparent.vue<template><div><Child text="hi"></Child></div>
</template><script>import Child from ‘./child.vue‘
export default {components:{Child}
}
child.vue<template><div>{{text}}</div>
</template><script>export default {props:{text:{type:String,default:‘hello world‘}}}
</script>
（重点已标记） 那么如果在子组件中改变从父组件传过来的值并且再传回去呢~??parent.vue <template><d...
父组件中的点击跳转： <ul class="insurance-entry clearfloat"><li v-link="{name:‘productlist‘,params:{id:1}}">1</li><li v-link="{name:‘productlist‘,params:{id:2}}">2</li><li v-link="{name:‘productlist‘,params:{id:3}}">3</li><li v-link="{name:‘productlist‘,params:{id:4}}">4</li><li v-link="{name:‘productlist‘,params:{id:5}}">5</li></ul>这里的params就是子组件的id可以算作一个参数，在子...
父组件这么写<component-a v-on:child-say="listenToMyBoy"></component-a><p>Do you like me? {{childWords}}</p>methods: {listenToMyBoy: function (somedata){this.childWords = somedata}} 子组件component-a这么写<button v-on:click="onClickMe">like!</button>methods: {onClickMe: function(){this.$emit(‘child-say‘,this.somedata);} 原文：http://www.cnblogs.com/wangzhichao/p/7993163.html
场景：父组件发生数据变化，动态的传递给子组件，子组件实时刷新视图解决方法：需要在子组件watch中（监听）父组件数据的变化在子组件中使用watch应该注意的问题：1.watch监听普通类型的数据：data() { return { frontPoints: 0 }
},
watch: { frontPoints(newValue, oldValue) { console.log(newValue) }
} 2.watch监听数组类型 的数据data() { return { winChips: new Array(11).fill(0) }
},
watch:...
