vue学习之组件传值、自定义事件

1、静态传值

注意：在template中不要加样式，因为不会起到任何作用他是不会执行的


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>Documenttitle>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js">script>
    <style>
 
    style>
head>
 
<body>
    
    <div id="root">
        
        <com-son movies="狐妖小红娘" haha="我是父组件传过来的一句话">com-son>
 
    div>
    
    <template id="myson">
        <div>
            
            <h1>我是子组件h1>
            <h1>{
  {movies}}h1>
            <h1>{
  {haha}}h1>
        div>
    template>
    <script>
        // 创建子组件
        let ComSon = {
            template: "#myson",
            props: ['movies', "haha"],
 
        }
        const vm = new Vue({
            el: '#root',
            data() {
                return {
 
                }
            },
            methods: {
            },
            // 注册成一个局部组件
            components: {
                ComSon
            }
        });
    script>
body>
 
html>

效果图：

2、动态传值

要保证父组件里面的变量名=props里面的值=templ中的插值{ {}}


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>Documenttitle>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js">script>
    <style>
        .fa {
            width: 800px;
            height: 800px;
            background-color: PINK;
            padding: 20px;
        }
 
        .fa button {
            width: 300px;
            height: 100px;
            margin-top: 20px;
        }
 
        .son {
            width: 600px;
            height: 600px;
            background-color: green;
        }
    style>
head>
 
<body>
    <div id="root" class="fa">
        
        
        <com-son :message="msg">com-son>
        <button @click="change">改变msg值button>
    div>
    <template id="myson">
        <div class="son">
            <h1>我是子组件h1>
            <h1>{
  { message }}h1>
 
        div>
    template>
    <script>
        let ComSon = {

相关阅读:
飞行汽车飞行控制系统功能详解
Arduino esp8266实现局域网html喂食机
5李欣频文案精华版
flutter Widget index
【图像复原MWCNN】Multi-level Wavelet-CNN for Image Restoration
文心一言 VS 讯飞星火 VS chatgpt （121）-- 算法导论10.4 2题
工业智能网关BL110应用之十二：如何联网登录配置软件以及添加LAN口设备要采集的数据点
【21天打卡】前端攻城狮重学算法之-顺序查找
react18-webchat网页聊天实例|React Hooks+Arco Design仿微信桌面端
1740. 找到⼆叉树中的距离

原文地址：https://blog.csdn.net/ywforever/article/details/127358589