vue父子组件传值

一、vue子组件向父组件传值

1、定义子组件： 

2、定义父组件：

二、父组件向子组件传值

1、定义父组件：

2、定义子组件： 

 3、通过ref，v-slot传：适用于，界面中点击按钮弹框填写一些信息，如新增用户或者填写一个小的表格。

<addUserRouter ref="addUser"><template v-slot: addUser></template></addUserRouter>

 addUserRouter为一个组件，导入步骤省略：

点击按钮执行method中的方法add_user()

add_user() {

      this.$refs.addUser.dialogVisible = true;   显示dialog，addUserRouter组件data中定义为false

      this.$refs.addUser.title = "addUser"; dialog标题名，addUserRouter组件data中定义为" "

    }

4、通过ref传：

<Websocket ref="socket"></Websocket>

Websocket为组件。导入步骤省略：

直接周期函数或者方法中：this.$refs.socket.方法名() ，this.$refs.socket.变量名称.......

Websocket组件中定义的方法。data中定义的变量。

vue组件传值  
父传子
1.子组件props定义变量
2.父组件在使用子组件时通过行内属性给props变量传值
特点：单向数据流  
子传父
1.子组件：$emit触发父的事件
2.父在使用组件用@自定义事件名=父的方法 (子把值带出来)
特点：事件监听
非父子组件

vuex

一个组件在另一个组件中引入，叫父子组件
插槽的引入：
我们对组件进行复用的时候，虽可以通过父子传值改变组件的数据，但页面的结构还是取决于组件本身。
那么，如何不改变组件本身的结构，且能够在组件本身结构的基础上再添加想加的内容呢？使用插槽可以办到。
插槽概念：
插槽就是子组件中的提供给父组件使用的一个占位符，用slot标签 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，
填充的内容会替换子组件的slot标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”