2023-06-23

在 vue中组件的传值方式

 第一种:子传值给父(Mylist(子),App(父))

App组件:

要先(App..)中 写一个方法 ,这个方法用来值子组件中调用的,因为父亲定义一个方法 ,在孩子里面调用的时候,孩子才可以把参数传当做方法的实参,从而可以把参数传到父组件的方法 里面,然后父组件就可以拿这个 组件进行 操作

  <MyList  :juges="juges"></MyList>

methods:{

       juges(id) {

            this.todos.map((item) => {

            if (item.id === id) {

             item.done = !item.done;

              }

              });

        },

    },

Mylist组件:

click(id) {

 //.方法的调用

      this.juges(id);

    },

接收父传过来的属性

 props: ["juges"],


第二种:父传值给子  (Mylist(子),App(父))

App组件

例如传data 中的数据

 <MyList :todo="todos"></MyList>

data(){

 return {

      todos: [

        { id: "001", title: "跳舞", done: true },

        { id: "002", title: "唱歌", done: false },

        { id: "003", title: "跑步", done: true },

      ],

    };

}

Mylist组件

然后在这个组件中 就可以通过   this.todo 来使用 App组件(父组件)中传过来的值了

 props:['todo']

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容