大问题,求指点:vue组件—父组件向子组件传值(通过属性绑定)

问题:

       打滚撒娇卖萌的请会知道问题的大神,指点以下为什么错了。

       错的地方:浏览器调试工具显示的正确的,调用父类方法功能能实现,但是出现了两次定义标签内容,两个按钮其中一个不能正常响应。

注意:

1.v-bind数据绑定时,可能由于某种命名的规范方法或者属性名字不能是带有驼峰或者连字符的。并且绑定之后,还要放到子组件的props数据后,方可调用。

2.子组件调用的父组件的属性,只能读不能写。同时,子组件的属性是其私有的,Ajax请求返回data属性变化也只是子组件私有的

3.如果要传递方法时,用v-on绑定方法,通过this.$emit()完成template对于data的作用

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
      <div id="app">
          <com1 v-bind:extendmsg="msg"></com1>
          <!--父组件在调用子组件时候,可以通过数据绑定的形式,传值为子组件-->
          <!--注意:绑定的方法或者属性名字不能是带有驼峰或者连字符的,可能是命令规范-->
          <com1 @showcool="show"></com1>
      </div>
      
      <template id="app2">
          <div>
              <h3>vm实例的子组件  +++ {{ extendmsg }}</h3>
              <input type="button" value="点击" @click="myclick">
          </div>
      </template>

      <script>
          var vm = new Vue({
             el:'#app',
             data:{
                 msg:'com1的父组件data属性的数据'
             },
             methods:{
                 show(){
                     console.log('成功调用了父组件的方法')
                 }
             },
             components:{
                 com1:{
                     template:'#app2',
                     props:['extendmsg'],
                     //props:道具 只有绑定过后并在其中定义过,子组件才能使用父组件的某些属性   
                     //这里的数据,只可读不可写
                     methods: {
                         myclick(){
                             this.$emit('showcool')
                             //emit:触发,调用 通过这个完成template对于data的作用    
                         }
                     }
                 }
             }
          });
      </script>
</body>
</html>

没有传递方法之前效果:

之后的效果(出问题的图):

猜你喜欢

转载自blog.csdn.net/qq_42036616/article/details/82889716