VUE学习必备知识之数据通信

v-on 点击事件

...


...


 ... 

v-bind 缩写

...


...


 ... 

父 => 子组件

在父里面使用子组件Children：


 


子组件里面：

这样父组件里面的aaa/aa值变化 子组件里面就自动接收 跟着变变化

这里指定了传入的类型

子组件 => 父

父组件使用子组： 并自定义方法 thisMy (可自定义) 事件，

定义方法 handleParentClick ：

父：

 

 
 
 
 methods: {
    handleParentClick (data) {
      //这里处理逻辑 data是子组件传过来的参数
      console.log('thisMy', data)
    }


子组件：

 点击子组件触发父方法
 
 
  methods: {
    handleClick: function () {
    // 通过$emit去触发父类 我们自定义的方法
      this.$emit('thisMy', '这里是子组件传给父的参数')
    }
  }

双向通信：

下面是父里面内容

我在父组件中{
    {mytest}}

   
    
    
    
export default {
  name: 'App',
  data () {
    return {
      mytest: '222551111'
    }
  },
  components: { children}
}

这里一定要用 v-model绑定才可以双向通信

父->子：

mytest 先从data初始值=> 父组件里面p标签 => 子组件children的props => input里面的vaule值

下面是子组件内容

这里一定要个$emit分发才可以到父去

子 => 父：

输入值 =>自定义的方法handleInput里面 分发emit到value里面=>props=> input的value里面

slolt插槽

父：

 
      

        
wwwww
        父的插槽
      
 
text 为自定义slot名称，便于识别



子组件：